Flutter 單子 Widget 佈局之 Container、Padding 、 Center 、Align

單子 Widget 佈局

這一類 widget，包括 Container、Padding 、 Center 、Align

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的對齊方式，例如居中、居左居右等。

字段意思：

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"),
        )
      ],
    )

完~