本篇主要整理 flutter 中多組件布局用法。

一、線性布局：Row、Column

1. 定義

• 線性水平或垂直布局。
• 等同于 Android 中的 LinearLayout，很容易上手。

2. 使用說明

以 Row 為例說明，Column 先省略。

• Row 占用寬度 = 所有水平排列組件寬度總和。
• Row 占用高度 = 水平排列組件中最高的那個(gè)組件高度。
• Row 中水平方向排列方式通過 mainAxisAlignment 來控制，start end center spaceBetween spaceAround spaceEvenly；
• 垂直方向布局通過 crossAxisAlignment 控制，start end center stretch 。
• Row 占用寬度如果超出屏幕寬度，則會拋 overflow 屏幕溢出異常，此時(shí)可以使用 Expanded、Wrap 組件自動(dòng)換行，或使用可滑動(dòng)組件。
• Row 僅占一行，所以直接包裹 Text 組件如果過長，不會自動(dòng)換行，需要使用 Expanded 組件包裹。
• Row 嵌套 Row，最外層的 Row 會占滿父布局寬度，內(nèi)層 Row 則會按子組件大小布局。若要讓內(nèi)層 Row 也占滿父布局，則可以使用 Expanded 包裹內(nèi)層布局。[備注：必須是 Column <- Expanded <- Column 才生效，Column <- Expanded <- Row 不生效]

Row(
    children: [
        Container(
          color: Colors.lightGreen,
          child: Row(
            children: [
              Expanded(
                child: Container(
                  color: Colors.red,
                  child: Row(
                    children: [
                      Text("hello world. "),
                      Text("I am Jack "),
                    ],
                  ),
                )
              ),
            ],
          ),
        )
    ]
),

二、彈性布局：Flex

1. 定義

A widget that displays its children in a one-dimensional array. 

flutter 中的彈性布局，主要使用 Flex 和 Expanded 配合實(shí)現(xiàn)。

2. 特性

• 按水平或垂直方向進(jìn)行布局。
• 如果已知布局方向，則直接使用 Row 或 Column。
• 無滾動(dòng)特性，若需要在有限空間滾動(dòng)，則使用 ListView 。
• 如果僅有一個(gè)子組件，則應(yīng)使用 [Align] 或 [Center]。

3. 布局算法

• 詳見源碼注解。

4. 相關(guān)組件

• [Row]，F(xiàn)lex 子類，按水平方向布局；
• [Column]，F(xiàn)lex 子類，按垂直方向布局；
• [Expanded]，在 Flex 中使用，包裹子組件會占滿剩余全部空間；
• [Flexible]，在 Flex 中使用，包裹子組件只會按自身大小占滿部分剩余空間；
• [Spacer]，按 flex 大小使用空格填充空間。

5. 用法總結(jié)

• Flex(direction: Axis.horizontal) = Row；Flex(direction: Axis.vertical) = Column；
• Flex + Expanded(flex: 0) = LinearLayout(weight: 0)
• Flex + Flexible(flex: 0, fit: FlexFit.tight) = Expanded；FlexFit.loose，wrap_content 。

6. Expanded 與 Flexible

(1) Expanded

• 定義：控制位于 Row、Column 或 Flex 組件的權(quán)重。
• 特性：必須在 Row、Column 或 Flex 及其子類中使用。
• 同 Flexible 對比，會占滿剩余所有空間大小。如果子組件都是使用 Expanded 包裹，則根據(jù) flex 大小占用剩余空間大小。
• Expanded extend Flexible，為 Flexible 子類。

(2) Flexible

• 定義：控制位于 Row、Column 或 Flex 組件的權(quán)重。
• 特性：必須在 Row、Column 或 Flex 及其子類中使用。
• 同 Expanded 對比，不會占滿剩余所有空間大小。

7. 用法示例

Flex(
          axis: Axis.horizontal,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                height: 30.0,
                color: Colors.red,
              ),
            ),
            Spacer(
              flex: 1,
            ),
            Expanded(
              flex: 2,
              child: Container(
                height: 30.0,
                color: Colors.green,
              ),
            ),
          ],
        )

三、流式布局：Wrap、Flow

1. 定義

• 把超出屏幕顯示范圍會自動(dòng)折行的布局稱為流式布局。Row 只占一行，不會自動(dòng)換行。

2. 用法

• Flow 一般不常用，因?yàn)樾枰远x子 widget 布局策略。
• Wrap 同 Android FlexboxLayout 很像，可自動(dòng)換行，可自定義組件水平和垂直方向間距： spacing runSpacing 。

四、層疊布局：Stack

• 同 Android FrameLayout 幀布局很像，可層疊子組件；
• 同 Positioned 配合使用，可自定義子組件在父布局中的位置。

五、對齊布局：Align、Center

• 前面講到 Flex 時(shí)提到過，如果只有一個(gè)子組件，可以使用對齊組件進(jìn)行布局。比較簡單，暫略。

六、布局組件類圖

布局組件類圖

參考資料：

• 源碼注釋
• 文章：https://book.flutterchina.club/chapter4/intro.html