Flutter 单子 Widget 布局之 Container、Padding 、 Center 、Align

冷不防 2023-07-17 04:58 100阅读 0赞

### 文章目录 ###

*   *  单子 Widget 布局
     *   *  Container
         *  Padding
         *  Align
         *  Center

## 单子 Widget 布局 ##

> 这一类 `widget`，包括 `Container、Padding 、 Center 、Align`

### Container ###

> `Container`是一个结合了绘制（`painting`）、定位（`positioning`）以及尺寸（`sizing`）`widget`的`widget`。

**参考：[Flutter 布局（一）- Container详解][Flutter _- Container]**

Container({
        Key key,
        this.alignment,// 控制child的对齐方式
        this.padding,//decoration内部的空白区域
        Color color,//用来设置container背景色.和 foregroundDecoration 有冲突
        Decoration decoration,//绘制在child后面的装饰,可以设置边框、背景色、背景图片、圆角等属性
        this.foregroundDecoration,//绘制在 child 前面的装饰
        double width,//宽度
        double height,// 高度
        BoxConstraints constraints,//添加到child上额外的约束条件
        this.margin,//围绕在decoration和child之外的空白区域，不属于内容区域
        this.transform,//设置container的变换矩阵
        this.child,//container中的内容widget
      })

看个例子：例子来源 [Flutter 布局（一）- Container详解][Flutter _- Container]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]

Container(
      constraints: new BoxConstraints.expand(// child 的 约束条件，改变参数后没看出效果，目前先跳过
        height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
      ),
      decoration: new BoxDecoration(
        border: new Border.all(width: 2.0, color: Colors.red),// 红色边框2像素
        color: Colors.grey,// BoxDecoration背景色为灰色
        borderRadius: new BorderRadius.all(new Radius.circular(20.0)),// 边框圆角
        image: new DecorationImage(
          image: new NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
          centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),//将普通的图片设置成类似于安卓中的.9图，用于图片拉伸
        ),
      ),
      padding: const EdgeInsets.all(8.0),// 上下左右内边距为 8
      alignment: Alignment.center,// 内容居中显示
      child: new Text('Hello World',
          style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
      transform: new Matrix4.rotationZ(0.3),// 延Z轴倾斜 13.5 度
    );

### Padding ###

参考：[Flutter 布局（二）- Padding、Align、Center详解][Flutter _- Padding_Align_Center]

> 给 `widget` 设置`padding`属性

字段属性：

const Padding({
        Key key,
        @required this.padding,// 内边距
        Widget child,// 内容布局
      })

例子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]

new Padding(
      padding: new EdgeInsets.all(40.0),
      child: const Card(child: const Text('Hello World!')),
    )

### Align ###

> 设置`child`的对齐方式，例如**居中、居左居右**等。

字段意思：

const Align({
        Key key,
        this.alignment = Alignment.center,//对齐方式,默认居中对齐
        this.widthFactor,// 宽度因子，如果设置的话，Align的宽度就是child的宽度乘以这个值，不能为负数。
        this.heightFactor,// 高度因子，如果设置的话，Align的高度就是child的高度乘以这个值，不能为负数。
        Widget child,
      })

`alignment`对齐方式，`Alignment` 提供了以下的几个：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]  
示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]

Align(
          alignment: Alignment.center,
          widthFactor: 20.0,
          heightFactor: 10.0,
          child: new Text("Align"),
        )

### Center ###

> `Center`继承自`Align`

![在这里插入图片描述][2020032016052391.png]  
`Center`也就是`Align widget` 设置 `alignment: Alignment.center`之后的控件

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]

Column (
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              child: Text("Align"),
            ),
            Center(
              child: Text("Center"),
            )
          ],
        )

完~

[Flutter _- Container]: https://www.jianshu.com/p/366b2446eaab
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230528/ba5d963ffd144282a6d2fd9f5652cdac.png
[Flutter _- Padding_Align_Center]: https://github.com/yang7229693/flutter-study/blob/master/post/5.%20Flutter%20%E5%B8%83%E5%B1%80%EF%BC%88%E4%BA%8C%EF%BC%89-%20Padding%E3%80%81Align%E3%80%81Center%E8%AF%A6%E8%A7%A3.md
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/3bf3563bd47b4eb49ac842b6f16d4928.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20230528/148a04cf68af434488b6c9a8f602fc8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]: /images/20230528/1ba0655f0ca741efa92a17caca5b11ce.png
[2020032016052391.png]: /images/20230528/6f134eb609fe45eda737c8fab8a7f874.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]: /images/20230528/924d5b718905410bb95e16fbacfa0c74.png