Flutter系列之Flex佈局詳解

PS：長期堅持是一件很難的事情。

Flutter 是 Google 推出的跨平台 UI 框架，可以快速地在 Android 和 IOS 上構建高質量的應用程序，其主要特點是 Flutter 具有快速開發的能力、富有表現力和靈活的 Ui 以及良好的原生性能，本篇文章主要介紹 Flutter 中的 Flex 布局，如下：

Flex 基礎
Flex 常用設置
Row 和 Column
Expanded 和 Flexible
Spacer
總結

Flex 基礎#

Flex 布局方式已經廣泛使用在前端、小程序開發之中，如果之前已經學習過 Flex 布局，那麼在 Flutter 中也是大同小異的，Flexible Box 示意圖如下：

關於這張圖的介紹請查看前面這篇文章：

微信小程序之 Flex 容器詳解

Flex Widget 可以設置主軸方向，如果知曉主軸方向，可以直接使用 Row 或者 Column，Flex Widget 不能滾動，如果涉及到滾動可以嘗試使用 ListView，Flex Widget 的內容超過其寬度和高度，則顯示黃黑相間的警告條紋，以水平方向為例出現的報錯信息如下：

I/flutter (14749): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (14749): The following assertion was thrown during layout:
I/flutter (14749): A RenderFlex overflowed by 440 pixels on the right.

報錯顯示如下：

Flex 常用設置#

Flex 常用屬性如下：

direction
mainAxisAlignment
mainAxisSize
crossAxisAlignment
verticalDirection
textBaseline

direction#

設置主軸方向，可設置的值為 Axis.horizontal 和 Axis.vertical，交叉軸與主軸方向垂直。

mainAxisAlignment：#

設置子 Widget 沿著主軸方向的排列方式，默認 MainAxisAlignment.start，可設置的方式如下：

MainAxisAlignment.start：左對齊，默認值；
MainAxisAlignment.end：右對齊；
MainAxisAlignment.center：居中對齊；
MainAxisAlignment.spaceBetween：兩端對齊；
MainAxisAlignment.spaceAround：每個 Widget 兩側的間隔相等，與螢幕邊緣的間隔是其他 Widget 之間間隔的一半；
MainAxisAlignment.spaceEvently：平均分布各個 Widget，與螢幕邊緣的間隔與其他 Widget 之間的間隔相等.

對比效果如下：

mainAxisSize#

設置主軸的大小，默認 MainAxisSize.max，可設置的值如下：

MainAxisSize.max：主軸的大小是父容器的大小；
MainAxisSize.min：主軸的大小是其子 Widget 大小之和。

對比效果如下：

將 mainAxisAlignment 設置成 spaceBetween，如果 mainAxisSize 設置為 max，則是整個 Row 寬度基礎上按照 spaceBetween 的方式進行排列，如果 mainAxisSize 設置為 min，則是三個 Container 寬度之和範圍內按照 spaceBetween 的方式進行排列。

crossAxisAlignment#

設置子 Widget 沿著交叉軸方向的排列方式，默認 CrossAxisAlignment.center，可設置的方式如下：

CrossAxisAlignment.start：與交叉軸的起始位置對齊；
CrossAxisAlignment.end：與交叉軸的結束位置對齊；
CrossAxisAlignment.center：居中對齊；
CrossAxisAlignment.stretch：填充整個交叉軸；
CrossAxisAlignment.baseline：按照第一行文字基線對齊。

對比效果如下：

verticalDirection#

設置垂直方向上的子 Widget 的排列順序，默認為 VerticalDirection.down，設置方式如下：

VerticalDirection.down：start 在頂部，end 在底部；
VerticalDirection.up：start 在底部，end 在頂部。

對比效果如下：

注意觀察交叉軸設置的 CrossAxisAlignment.end，在此基礎上垂直方向上的變化。

textBaseline#

設置文字對齊的基線類型，可設置的值如下：

TextBaseline.alphabetic：與字母基線對齊；
TextBaseline.ideographic：與表意字符基線對齊；

使用時當 crossAxisAlignment 設置為 baseline 時，必須設置 textBaseline 屬性的值，使用方式如下：

// textBaseline
class FlexSamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flex Sample"),
        centerTitle: true,
      ),
      body: Row(
        children: <Widget>[
          Expanded(
              child: Row(
                children: <Widget>[
                  Text("躬",style: TextStyle(fontSize: 40,),),
                  Text("x",style: TextStyle(fontSize: 60,),),
                  Text("ing",style: TextStyle(fontSize: 16,),),
                  Text("之",style: TextStyle(fontSize: 16,),),
                ],
          )),
          Expanded(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.baseline,
                textBaseline: TextBaseline.alphabetic,
                children: <Widget>[
                  Text("躬",style: TextStyle(fontSize: 40,),),
                  Text("x",style: TextStyle(fontSize: 60,),),
                  Text("ing",style: TextStyle(fontSize: 16,),),
                  Text("之",style: TextStyle(fontSize: 16, ),),
                ],
          )),
          Expanded(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.baseline,
                textBaseline: TextBaseline.ideographic,
                children: <Widget>[
                  Text("躬",style: TextStyle(fontSize: 40, ),),
                  Text("x",style: TextStyle(fontSize: 60,),),
                  Text("ing",style: TextStyle(fontSize: 16,),),
                  Text("之",style: TextStyle(fontSize: 16,),),
                ],
              ))
        ],
      ),
    );
  }
}

分別為不設置 textBaseline 屬性、設置 TextBaseline.alphabetic 和 TextBaseline.ideographic，對比效果如下：

兩者雖然在對應基線含義上有所不同，但是測試沒發現不同，後期繼續留意觀察，知道的朋友可以評論指出。

Row 和 Column#

Row 和 Column 都繼承 Flex，Row 主軸的方向為水平方向，Column 主軸的方向為豎直方向，即在 Flex 基礎上設置了主軸方向 direction，如下：

// Row
direction: Axis.horizontal,
/// Column
direction: Axis.vertical,

如果確定主軸方向，可以直接使用 Row 或者 Column，使用方式和 Flex 一致。

Expanded 和 Flexible#

Flexible 的 fix 屬性默認為 FlexFit.loose，而 Expanded 繼承 Flexible，其 fix 屬性指定為 FlexFit.tight，兩者因為其 fix 屬性不同而不同，若將 Flexible 的 fit 屬性設置為 FlexFit.tight，則 Flexible 與 Expanded 等效，可設置的 fit 屬性如下：

tight：強制填充可利用的空間；
loose：不強制填充可利用空間，Widget 自身大小。

對比效果如下：

Expanded 可以使 Row、Column、Flex 裡面的組件填充沿著主軸可利用的空間，如果多個 Widget 都使用了 Expanded 組件，可以使用 Expanded 的 flex 屬性按照比例分配主軸空間，flex 屬性相當於 Android LinearLayout 的 weight 屬性，如下：

// Expanded
class ExpandedSamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Row Sample"),
          centerTitle: true,
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                  child: Center(
                    child: Text(
                      "A",
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  )),
            ),
            Expanded(
              flex: 2,
              child: Container(
                  width: 50, // Row Expanded下width無效
                  height: 50, // Column Expanded下height無效
                  color: Colors.green,
                  child: Center(
                    child: Text(
                      "B",
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  )),
            ),
            Container(
                width: 50,
                height: 50,
                color: Colors.yellow,
                child: Center(
                  child: Text(
                    "C",
                    style: TextStyle(fontSize: 20, color: Colors.white),
                  ),
                )),
          ],
        ));
  }
}

顯示效果如下：

Spacer#

Spacer 用來調節 Widget 之間的間距，會佔據所有的剩餘空間，因此 MainAxisAlignment 的設置將無效，Spacer 的屬性 flex 用於設置剩餘空間的分配權重，默認值為 1，表示佔據所有剩餘空間，如果兩個以上 Spacer 則按照 flex 分配剩餘空間，代碼參考如下：

class RowSamplePage1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Row Sample"),
          centerTitle: true,
        ),
        body: ConstrainedBox(
          constraints: BoxConstraints(maxHeight: 150),
          child: Row(
            children: <Widget>[
              Container(
                width: 80,
                height: 80,
                color: Colors.red,
              ),
              Spacer(flex: 1,),
              Container(
                width: 80,
                height: 80,
                color: Colors.green,
              ),
              Spacer(flex: 2,),
              Container(
                width: 80,
                height: 80,
                color: Colors.yellow,
              ),
            ],
          ),
        ));
  }
}

顯示效果如下：

以上主要學習了 Flutter 中 Flex 布局相關內容，重點是理解 Flex 基本概念，在此基礎上對 Flex 布局進行了學習和驗證。