Flutter 单子 Widget 布局 图文示例

单子 Widget 布局

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

Container

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

参考：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详解

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详解

给 widget 设置padding属性

字段属性：

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

例子：

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

Align

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

扫描二维码关注公众号，回复： 10034526 查看本文章

字段意思：

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

alignment对齐方式，Alignment 提供了以下的几个：

示例：

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

Center

Center继承自Align

Center也就是Align widget 设置 alignment: Alignment.center之后的控件

示例：

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

完~