flex 布局算法

Flutter 彈性布局的基石 是 flex 和 flexible。理解了這兩個 widget，后面的row，column 就都輕而易舉了。本文用示例的方式詳細介紹 flex 的布局算法。

• 先布局 flex 為 0 或 null 的 child。在 main 軸上 child 受到的約束是 unbounded。如果 crossAxisAlignment 是 CrossAxisAlignment.stretch， 在 cross 軸上的約束是 tight，值是 cross 軸上收到約束的最大值。否則，在 cross 軸上的約束是 loose。
• 為 flex 不為 0 的 child 申請空間，flex 值越大，按比例得到的可以占用的空間越大。
• 為 flex 不為 0 的 child 分配空間。main 軸方向的最大值是第二步申請到的空間的值。如果 child 的fit 參數為 FlexFit.tight,child在主軸方向 受到 tight 約束，值為第二步申請到的空間的值。如果 child 的 fit 參數為 FlexFit.loose，child在主軸方向 受到 loose 約束。child在主軸方向可以任意小，但不能超第二步申請到的空間的值。
• flex cross 軸的高度是能包住所有 child，并不超過最大約束。
• flex main 軸的寬度與 mainAxisSize 有關。如果 mainAxisSize 是 MainAxisSize.max，main 軸的寬度是最大約束值，否則是能包住所有child ，但不超過最大約束。
• flex自己的尺寸和 child 的尺寸確認后，根據 mainAxisAlignment 和 crossAxisAlignment 擺放 child。

看了算法并不直觀，下面通過實例講解。

非彈性組件在 main 軸受到的約束是 unbounded

Flex(
      direction: Axis.horizontal,
      children: [
        Container(
          width: 1000,
          height: 100,
          color: Colors.red[200],
        ),
      ],
    )

我們看到，Flex 在主軸的約束是 unbounded，所以 container 可以取值 1000，超出屏幕，顯示警告。

fit 參數

flex 值越高，可以分到的空間越大。但能否占滿空間取決于 fit 參數

Flex(
      direction: Axis.horizontal,
      children: [
        Flexible(flex:2 ,child: Container(width: 50,height: 80,color: Colors.green,),),
        Flexible(flex:1, child: Container(width: 100,height: 50,color: Colors.blue[300],),),
        Container(width: 50,height: 100,color: Colors.red[200],
        ),
      ],
    )

假設寬一共 200，布局過程：

• 先分配非彈性 child 紅色塊 50。
• 綠色和藍色塊是彈性塊，它們會瓜分剩下的 150，按 flex 值，綠色塊應該分 100，藍色塊分 50。
• 綠色塊的 fit 值是 loose，flex 不強制它把空間占滿，所以它只點了 50。藍色塊的 fit 值 是 loose，它的 width 比 50 大 flex 會強制它的寬度為 50。效果就是右邊還剩下 50，那本來是分給綠色塊的。

如果綠色塊的 fit 值修改為 FlexFit.tight，剩下的空間就會被占滿了，這個時候 width 會被忽略。

flexible 的作用就是為了修改 child 的 parentData，給 child 增加 fit, flex 布局信息。讓 flex 根據這些信息為 child 布局。

Expanded

class Expanded extends Flexible {
  const Expanded({
    super.key,
    super.flex,
    required super.child,
  }) : super(fit: FlexFit.tight);
}

Expanded 其實就是 fit 固定為 FlexFit.tight 的 flexible。其實可以直接用 flexible 的，但因為 Expanded 太常用了，所以單獨加了一個類。同時 Expanded 也更加有語義。Expanded 和 flexible 的關系就像 Center 和 Align的一樣。

Spacer

class Spacer extends StatelessWidget {
  const Spacer({super.key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0);
  final int flex;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}

Spacer 的 child 是 SizedBox.shrink()，用來占位，沒有實際的意義。Spacer 是 Expanded 的包裝，就是為了占空位用的。

至于擺放 child 的規則大同小異，如果有不明白的同學可以看 這篇 Flutter Wrap 圖例

Flex 和 Flexible 如果都掌握了，Row 和 Colmn 自然就會了。因為 Row 只是 direction 為 Axis.horizontal 的 Flex，Column 只是 direction 為 Axis.vertical 的 Flex。