Flutter 多子 Widget 佈局之線性佈局 Row、Column

主要參考：Flutter 佈局（七）- Row、Column詳解

線性佈局 Row、Column

Flutter中通過Row和Column來實現線性佈局，也就是水平和垂直佈局。

Row

水平佈局

源碼中的字段含義如下：

Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//children在主軸方向上的對齊方式
    MainAxisSize mainAxisSize = MainAxisSize.max,// 在主軸方向佔有空間的值
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//children在交叉軸方向的對齊方式
    TextDirection textDirection,// 水平方向上的文字擺放順序
    VerticalDirection verticalDirection = VerticalDirection.down,// 豎直方向上 children 擺放順序
    TextBaseline textBaseline,// 文本基準線
    List<Widget> children = const <Widget>[],// 子 widget 集合
  })

每個字段又有相關的參數可設置，熟悉各個字段值的含義有助於我們快速準確使用字段。

MainAxisAlignment

MainAxisAlignment 的取值有：start, end, center, spaceBetween, spaceAround, spaceEvenly
效果圖如下：

僞代碼如下：

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    Text(" hello "),
    Text(" I am MainAxisAlignment.end "),
  ],
),

• start：將children從屏幕左側起點開始排列
• end：將children從屏幕右側做起點開始排列
• center：將children從屏幕中間做起點開始排列
• spaceBetween：將主軸方向上的空白區域均分，使得children之間的空白區域相等，首尾child都靠近首尾，沒有間隙；
• spaceAround：將主軸方向上的空白區域均分，使得 children之間的空白區域相等，但是首尾child的空白區域爲1/2；
• spaceEvenly：將主軸方向上的空白區域均分，使得children之間的空白區域相等，包括首尾child；

再來細看spaceBetween,spaceAround,spaceEvenly 這三個字段效果圖對比上面的文字描述：

僞代碼如下：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Text(" hello "),
    Text(" word "),
    Text(" spaceBetween "),
  ],
),

CrossAxisAlignment

CrossAxisAlignment表示交叉軸，Row的主軸是水平方向，交叉軸暫時沒想到好的示例，這裏就不做圖示了。

CrossAxisAlignment的取值有：baseline, center, end, start, stretch

• baseline：在交叉軸方向，使得children的baseline對齊
• center：children在交叉軸上居中展示
• end：children在交叉軸上末尾展示
• start：children在交叉軸上起點處展示
• stretch：讓children填滿交叉軸方向

TextDirection

水平方向上的文字（child）擺放順序，TextDirection 的取值有：rtl, ltr

• rtl:文本從右向左排列
• ltr:文本從左向右排列（默認）

效果圖：

僞代碼：

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  textDirection: TextDirection.ltr,
  children: <Widget>[
    Text(" hello "),
    Text(" I am MainAxisAlignment.start "),
  ],
),

MainAxisSize

MainAxisSize 的取值有：min, max

• max:最大化使用主軸方向的可用空間（默認）
• min:與max相反，是最小化使用主軸方向的可用空間

僞代碼：

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text(" hello "),
    Text(" I am MainAxisAlignment.start "),
  ],
),

VerticalDirection

豎直方向上（child）擺放順序，VerticalDirection 的取值有：up, down

• up: 表示Row縱軸（垂直）從上到下進行佈局
• down: 表示Row縱軸（垂直）從下到上進行佈局

Column

垂直佈局，Column參數和Row一樣，不同的是佈局方向爲垂直，主軸縱軸方向相反。

MainAxisAlignment

Column的主軸是垂直方向，交叉軸暫時沒想到好的示例，這裏先不介紹了。

CrossAxisAlignment

效果圖如下：

僞代碼：

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text(" hello "),
    Text(" I am  CrossAxisAlignment.center "),
  ],
),

從效果圖上看stretch、baseline還是區分不了。所以再來看了效果圖：

僞代碼實現：

Column(
  children: <Widget>[
    SizedBox(
      height: 30,
    ),
    Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Text(" hello "),
        Text(" I am  CrossAxisAlignment.stretch "),
      ],
    ),
    SizedBox(
      height: 30,
    ),
    Column(
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
      children: <Widget>[
        Text(" hello "),
        Text(" I am  CrossAxisAlignment.baseline "),
      ],
    ),
  ],
));

分析一波：
baseline的含義是：在交叉軸方向，使得children的baseline對齊。
而現在是Column組件，交叉軸默認是水平方向，並且默認的主軸方向是居中開始，
所以文字是從水平方向居中開始擺列。因此上面的效果圖也就很好解釋了。

stretch的含義是：讓children填滿交叉軸方向，從效果圖來看沒毛病。

剩下的下篇寫吧，文章太長，看着容易困！

完~