【Flutter 2-8】Flutter手把手教程UI佈局和Widget——水平佈局控件Row

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

Row

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

Row的構造函數與Column的構造函數基本是同樣的

Row({
        /// key
    Key key,
    /// Row的對其方式 默認是 MainAxisAlignment.start
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    /// 表示Row在垂直方向佔用的大小，默認是 max，表示儘量的充滿垂直方向空間。若是這是 min表示儘可能小的佔用垂直方向空間
    MainAxisSize mainAxisSize = MainAxisSize.max,
    /// 水平方向對其方式 默認是 居中對齊
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    /// 子控件的佈局順序，不一樣國家書寫習慣的不一樣(中文、英語從左往右書寫，阿拉伯文從右往左書寫)，這個參數能夠幫助咱們調整佈局顯示順序
    TextDirection textDirection,
    /// 表示垂直方向的對其方向 
    VerticalDirection verticalDirection = VerticalDirection.down,
    /// 基線對齊方式 
    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
子控件的高度拉伸到與Row相同大小

CrossAxisAlignment.baseline

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會控制書寫習慣來改變佈局。這個實際上是在作國際化的時候用到的比較多。

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

verticalDirection

verticalDirection屬性不經常使用，它有兩個值，分別是：VerticalDirection.down和VerticalDirection.up。
VerticalDirection配合CrossAxisAlignment的參數值，也會有不一樣的顯示效果，跟textDirection相似。

• VerticalDirection.down 和 CrossAxisAlignment.start

• VerticalDirection.down 和 CrossAxisAlignment.end

• VerticalDirection.up 和 CrossAxisAlignment.start

• VerticalDirection.up 和 CrossAxisAlignment.end

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

---