Flutter系列之Flex佈局詳解

躬行之發表於2020-12-28
FlutterFlex

PS：想做一件事很容易，真正去做一件事很困難。

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

  1. Flex基礎
  2. Flex常用設定
  3. Row和Column
  4. Expanded和Flexible
  5. Space
  6. 總結

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 常用屬性如下：

  1. direction
  2. mainAxisAlignment
  3. mainAxisSize
  4. crossAxisAlignment
  5. verticalDirection
  6. textBaseline
1. direction

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

2. mainAxisAlignment：

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

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

對比效果如下：

mainAxisAlignment

3. mainAxisSize

設定主軸的大小，預設 MainAxisSize.max，可設定的值如下：

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

對比效果如下：

mainAxisSize

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

4. crossAxisAlignment

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

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

對比效果如下：

crossAxisAlignment

5. verticalDirection

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

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

對比效果如下：

verticalDirection

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

6. 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和Flexible

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 佈局進行了學習和驗證，更多內容見微信公眾號躬行之。

在這裡插入圖片描述

相關文章