Flutter布局4--Row

Row

• 簡介

• mainAxisAlignment：主軸布局方式，row主軸方向是水平方向

• crossAxisAlignment: 交叉軸的布局方式，對於row來說就是垂直方向的布局方式

• Row 是一個將其child顯示在水平數組的widget
• ·將其child填充可用的橫向水平空間，一行高度是childs的最大高度（即：總是滿足傳入的垂直約束）
• ·如果你只有一個child，只需要考慮使用對其或者中間位置，如果多個child，注意擴展水平空間（Expanded），可以將child封裝在一個擴展部件里面
• ·當我們看到行有黃色和黑色條紋警告時候，說明行已經溢出，當行溢出，行之間空間將沒有任何空間可供擴展。
• 基本用法

• 水平布局，設置位置對齊方式
  mainAxisSize 屬性
  ·一行的高度是有mainAxisSize屬性控制，默認是max mainAxisAlignment屬性
  ·將children放置在主軸某位置
  CrossAxisAlignment 屬性
  ·crossAxisAlignment:crossAxisAlignment.center/end/start，
  ·即，根據設定的位置交叉對齊

• 默認值：MainAxisAlignment.start：

1. start ，沿着主軸方向(水平方向)頂部對齊；
2. end，沿着主軸方向(水平方向)底部對齊；
3. center，沿着主軸方向(水平方向)居中對齊；
4. spaceBetween ，沿着主軸方向(水平方向)平分剩余空間；
5. spaceAround，把剩余空間平分成n份，n是子widget的數量，然后把其中一份空間分成2份，放在第一個child的前面，和最后一個child的后面；
   6.spaceEvenly，把剩余空間平分n+1份，然后平分所有的空間，請注意和spaceAround的區別

6. 默認值：CrossAxisAlignment.center，默認是水平居中

   1. start ，垂直主軸方向(垂直方向)頂部對齊；
   2. end，垂直主軸方向(垂直方向)底部對齊；
   3. center，垂直主軸方向(垂直方向)居中對齊；
   4. stretch ，垂直主軸方向(垂直方向)拉伸子child；
   5. baseline，這個要和textBaseline一起使用，；

7. mainAxisAlignment：主軸布局方式如下:

• crossAxisAlignment: 交叉軸的布局方式，對於row來說就是垂直方向的布局方式,如下:

•