居中容器 Center

可以讓 child 在其中垂直和水平居中

Center(child: Text("Hello guys")
)

兩種處理間距布局容器 Container 和 Padding

Container 是負(fù)責(zé)對(duì)內(nèi)部 child 進(jìn)行 padding 和 margin 處理，會(huì)根據(jù) child 內(nèi)容自動(dòng)適配大小。

Container(magin: EdgeInsets.all(20),
        padding: EdgeInsets.all(30),
        color: Colors.gray,
        child: Text("Hello"),
)

Padding 是只負(fù)責(zé) child 的 padding，會(huì)根據(jù) child 自動(dòng)適配大小

Padding(padding: EdgeInsets.all(20),
    child: Text("Hello"),
)

處理多個(gè)子視圖布局的容器 Row 和 Column

Row 和 Column 都用于包含多個(gè)子視圖（children）在同一方向上的排列布局 alignment，Row 是橫向排列，Column 是縱向排列
其中有兩個(gè)主要屬性：

1. mainAxisAlignment：主要方向子視圖的排列方式，Row(橫向)，Column(縱向)
2. crossAxisAlignment： 是與主要方向正交的排列，即Row(縱向)，Column(橫向)
   這兩個(gè)屬性是 Enum 類型，mainAxisAlignment 包括了以下主要成員：

• start：內(nèi)容開(kāi)始的位置（上或者左）
• center：居中
• end：（內(nèi)容結(jié)束的位置，下或者右）
• spaceAround, spaceBetween, spaceEvenly：處理不同的子控件間距
  crossAxisAlignment 包括了一下主要成員：
• start：內(nèi)容開(kāi)始的位置（上或者左）
• center：居中
• end：（內(nèi)容結(jié)束的位置，下或者右）
• baseline 內(nèi)容的基線
• stretch：內(nèi)容拉伸鋪滿
  舉例布局一個(gè)子視圖數(shù)組的代碼如下：

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
        Text("Hello"),
        Text("World"),
        Text("Morning!"),
    ],
);

Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
        Text("Hello"),
        Text("World"),
        Text("Morning!"),
    ],
);

注意，對(duì)齊方式是以子視圖的內(nèi)容寬度來(lái)進(jìn)行衡量的，如果有一個(gè) child 的別的容器則會(huì)考慮容器內(nèi)總的內(nèi)容 size 來(lái)衡量。

Flex 布局 Extended

為了讓一個(gè)控件具備松散的布局方式，可以嵌套一個(gè) Expanded 容器，其有一個(gè) flex 屬性可以決定其 flex 的權(quán)重。

Expanded(
    flex: 3
    child: Container(child: Text("Hello")
)

那么在一個(gè)父容器中，多個(gè) flex 容器可以進(jìn)行對(duì)應(yīng)權(quán)重的分布，比如將一個(gè)圖片放入到一個(gè) Expanded 容器后給定 flex 值進(jìn)行大小的控制。

// 實(shí)現(xiàn)一個(gè) 2:1:1 的布局
Row(
    children: <Widget>[
    Expanded(
    flex: 2
    child: Container(child: Text("Hello")
    )，
    Expanded(
    flex: 1
    child: Container(child: Text("Hello")
    )，
    Expanded(
    flex: 1
    child: Container(child: Text("Hello")
    )，
],
)

分隔符 SizeBox 和 Divider

SizeBox 是一個(gè)占用特定寬、高的容器，舉例：

// 占用寬 10
SizeBox(width: 10);
// 占用高 20
SizeBox(height: 20;

Divider 是占用特定高度的分割線，舉例：

// 一條高為 20 厚度為 2 的分割線
Divider(
    height: 20,
    thickness: 2,
}