【Flutter 2-7】Flutter手把手教程UI佈局和Widget——垂直佈局控件Column

做者 | 弗拉德
來源 | 弗拉德（公衆號：fulade_me)

Column

Column是在Flutter中常見的佈局控件，它負責垂直方向佈局。Row負責水平方向佈局，兩者都是繼承於Flex，相似於iOS裏面的UIScrollView，可是又有不少不一樣。
先來看一下Column的構造函數

Column({
    /// key
    Key key,
    /// Column的對其方式 默認是 MainAxisAlignment.start
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    /// 表示Column在垂直方向佔用的大小，默認是 max，表示儘量的充滿垂直方向空間。若是這是 min表示儘可能小的佔用垂直方向空間
    MainAxisSize mainAxisSize = MainAxisSize.max,
    /// 橫軸對其方式 默認是 居中對齊
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    /// 子控件的佈局順序，不一樣國家書寫習慣的不一樣(中文、英語從左往右書寫，阿拉伯文從右往左書寫)，這個參數能夠幫助咱們調整佈局顯示順序
    TextDirection textDirection,
    /// 表示垂直方向的對其方向 
    VerticalDirection verticalDirection = VerticalDirection.down,
    /// 基線對齊方式 在Row裏面會有使用
    TextBaseline textBaseline,
    /// 子控件
    List<Widget> children = const <Widget>[],
})

mainAxisAlignment

mainAxisAlignment接收一個MainAxisAlignment類型的枚舉，MainAxisAlignment共有六個枚舉值，以下：

枚舉值	描述
start	與 開始的位置對齊
end	與 結束的位置對齊
center	居中對齊
spaceBetween	把剩餘的空間拆分紅n-1份(n是子控件的個數) 每一份都插入到子控件之間
spaceEvenly	把剩餘的空間拆分紅n+1份(n是子控件的個數) 而後均勻分佈
spaceAround	把剩餘空間拆分紅 2n 份(n是子控件的個數) 每一個子控件上下各放一份

看描述比較晦澀，咱們直接來看效果：

MainAxisAlignment.start
居頂部

MainAxisAlignment.center
居中間

MainAxisAlignment.end
居底部

MainAxisAlignment.spaceBetween
把剩餘的空間拆分紅n-1份(n是子控件的個數)，這裏也就是3分，每一份都插入到子控件之間。看綠色數字就是每一份的編號

MainAxisAlignment.spaceEvenly

把剩餘的空間拆分紅n+1份(n是子控件的個數)，這裏也就是5分， 而後均勻分佈。

MainAxisAlignment.spaceAround
把剩餘空間拆分紅 2n 份(n是子控件的個數)，這裏也就是8分，每一個子控件上下各放一份

crossAxisAlignment

crossAxisAlignment接收一個CrossAxisAlignment枚舉值，有如下5中枚舉

枚舉值	描述
start	與 開始的位置對齊
end	與 結束的位置對齊
center	居中對齊
stretch	水平方向擴充與Column相同大小
baseline	無效

CrossAxisAlignment.start
居左側

CrossAxisAlignment.center
居中

CrossAxisAlignment.end
居右側

CrossAxisAlignment.stretch
子控件的寬度拉伸到與Column相同大小

textDirection

textDirection參數接收一個TextDirection類型的枚舉類型，它有兩個不一樣的枚舉值，以下

枚舉值	描述
rtl	書寫習慣是從右邊開始 子控件默認從右邊對齊
ltr	書寫習慣是從左邊開始 子控件默認從左邊對齊

crossAxisAlignment參數會受到textDirection參數值影響。
以下：

• 當 textDirection的參數值爲ltr時，crossAxisAlignment參數爲CrossAxisAlignment.start這個時候子控件居左對齊。

• 當 textDirection的參數值爲ltr時，crossAxisAlignment參數爲CrossAxisAlignment.end這個時候子控件居右對齊。

• 當 textDirection的參數值爲rtl時，crossAxisAlignment參數爲CrossAxisAlignment.start這個時候子控件居右對齊。

• 當 textDirection的參數值爲rtl時，crossAxisAlignment參數爲CrossAxisAlignment.end這個時候子控件居作對齊。

總的來講textDirection會控制書寫習慣來改變佈局。這個實際上是在作國際化的時候用到的比較多。在下一節即將講解的Row也相同的會收到影響。

在上面的描述中有 開始的位置和 結束的位置，爲何不直接寫 左邊或 右邊，其實也是受 textDirection的影響， 開始的位置就是書寫開始的位置， 結束的位置就是寫結束的位置。

想體驗以上的Column的示例的運行效果，能夠到個人Github倉庫項目flutter_app->lib->routes->column_page.dart查看，而且能夠下載下來運行並體驗。

---