Flutter組件學習（四）—— 佈局組件Row和Column

序言

以前幾篇文章介紹了Flutter——Text文字組件，Flutter——Image圖片組件，Flutter——TextFiled輸入框組件，上面的這些組件能夠說是一些直接能「看的到」樣式組件，接下來我會帶你們一塊兒來學習 Flutter 中的一些「看不到」的佈局組件，老規矩，先上圖：

介紹

咱們都知道，在Android中有幾大經常使用佈局，LinearLayout，RelativeLayout，FrameLayout，GridLayout 等等，在 Flutter 中也有相似的一些佈局，好比咱們今天要講的 Row/Column 佈局；看字面意思咱們大概就能知道，這是一個橫向佈局和一個縱向佈局，沒錯，這兩個就對應 LinearLayout 中 orientation 的 horizontal 和 vertical 屬性，下面來了解一下這兩個佈局的用法。

構造方法

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline textBaseline,
  List<Widget> children = const <Widget>[],
})
複製代碼

由於這兩個的構造方法都是同樣的，用法也是同樣的，只是方向上的不一樣，因此咱們分析一個就行了：

一、mainAxisAlignment

這個屬性用來設置主軸的對齊方式，何爲主軸？若是當前是 Row 組件，那麼主軸就是水平的，若是當前是 Row 佈局，那麼主軸就是水平的，這一點有點相似前端的 flex 佈局，也有點相似於 Android 中的 ConstraintLayout 佈局，它的值有六種：

屬性名稱	樣式
start	內部的子組件將從主軸起始位置開始排列（正向排列）
end	內部的子組件將從主軸末尾位置開始排列（反向排列）
center	內部的子組件將從主軸中間位置開始排列（居中）
spaceBetween	內部的首尾子組件靠近首尾兩端，其他子組件居中排列且組件間的間距同樣
spaceAround	內部的子組件居中排列，且每一個子組件的左右邊距同樣大
spaceEvenly	內部的子組件居中顯示，每一個空間的左邊和右邊都有相同的間距

可能上面的文字說明有點繞，具體效果能夠看一下下面這張圖：

二、mainAxisSize

這個屬性用來設置 Row/Column 佈局的寬高值，有兩個值能夠設置:

屬性名稱	樣式
max	至關於match_parent
min	至關於wrap_content

具體效果，看下面這張圖就一目瞭然了：

三、crossAxisAlignment

這個屬性用來控制非主軸的對齊方式，好比說當你使用 Row 佈局的時候，能夠設置豎直方向上的對齊方式，Column 也是同樣，它的值有五種：

屬性名稱	樣式
start	內部的子組件將從非主軸起始位置開始排列（正向排列）
end	內部的子組件將從非主軸末尾位置開始排列（反向排列）
center	內部的子組件將從非主軸中間位置開始排列（居中）
stretch	內部的子組件將從非主軸中間位置開始排列，而且徹底填充非主軸方向
baseline	內部的子組件將從baseline的方向對齊，這個須要設置textBaseline屬性，否則的話會報錯

具體效果看下圖：

四、textDirection

這個屬性用來控制 Row 佈局中內部子組件的擺放順序，有兩種：

屬性名稱	樣式
TextDirection.ltr	從左至右排列
TextDirection.rtl	從右至左排列

具體效果以下圖所示：

五、verticalDirection

這個屬性用來控制 Column 佈局中內部子組件的擺放順序，有兩種：

屬性名稱	樣式
VerticalDirection.up	從下至上排列
VerticalDirection.down	從上至下排列

具體效果以下圖所示：

六、textBaseline

這個屬性也是用來設置子組件對齊的，只不過對齊的是字符的基線，有兩個值：

屬性名稱	樣式
TextBaseline.ideographic	用於對齊表意字符的水平線
TextBaseline.alphabetic	用於對齊字母字符的水平線

須要注意的是，上文說到，這個須要配合 crossAxisAlignment 屬性來使用，來看一下具體的效果：

代碼已上傳至Github

公衆號

歡迎關注個人我的公衆號【IT先森養成記】，專一大前端技術分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技術；在這裏你能獲得的不止是技術上的提高，還有一些學習經驗以及志同道合的朋友，趕快加入咱們，一塊兒學習，一塊兒進化吧！！！