Flutter佈局篇（1）--水平和垂直佈局詳解

版權聲明：本文首發在公衆號Flutter那些事，未經受權，嚴禁轉載。

本文示例代碼發佈在Github，地址爲: https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/README-CN.md

先來看看本文的目錄，以下圖所示：

在原生Android開發中，咱們常常會用LinearLayout來達到水平或垂直方向的佈局，在Flutter中有兩個經常使用的組件也可以作到相似的效果，分別是Row和Column組件，Row組件主要功能是處理水平方向的佈局，Column組件主要功能是處理垂直方向的佈局。下文會具體講解在Flutter中如何使用Row和Column組件實現LinearLayout效果，以及二者之間的對比，方便你們對比學習。

---

LinearLayout 裏面的android:orientation="horizontal」屬性至關於Row組件，LinearLayout 裏面的 android:orientation="vertical」屬性至關於Column組件。

Flutter和LinearLayout的對比圖示以下：

Row的使用示例代碼以下所示：

Column的使用示例代碼以下所示：

Flutter中的Row以及Column使用效果圖以下所示：

這裏是Android裏面的使用（因爲Flutter效果和Android的是同樣的，後文的安卓效果圖就再也不展現了）

---

LinearLayout 裏面的android:layout_width="wrap_content"或者 android:layout_height="wrap_content"屬性至關於Row/Column組件裏面的 MainAxisSize.min 屬性。

LinearLayout 裏面的android:layout_width="match_parent"或者android:layout_height="match_parent"屬性至關於Row/Column組件裏面的 MainAxisSize.max 屬性。Row/Column組件若是沒有設置mainAxisSize屬性，默認爲max屬性值。第二小節中的Row/Column組件咱們並無設置mainAxisSize屬性，可是咱們能夠看到它的效果是MainAxisSize.max 屬性的效果（Row自動填充寬爲屏幕的寬，Column自動填充高爲屏幕的高）。

Flutter和LinearLayout的對比圖示以下：

Flutter使用圖解以下：

---

這個是最複雜的，須要重點掌握。gravity屬性在Android裏面是用於指定控件自己或子孩子控件的對齊屬性。在Flutter中咱們可使用 Row/Column組件 的 MainAxisAlignment 以及 CrossAxisAlignment 實現控件的對齊效果。

MainAxisAlignment 是設置主軸方向的對齊方式。若是咱們給 Row 組件設置 MainAxisAlignment 屬性，那麼它的主軸爲水平方向。若是咱們給 Column 組件設置 MainAxisAlignment 屬性，那麼它的主軸爲垂直方向。

MainAxisAlignment 有6個屬性值，默認值爲start，分別是：

一、MainAxisAlignment.start，將子控件放在主軸的起始位置。
二、MainAxisAlignment.end，將子控件放在主軸末尾。
三、MainAxisAlignment.center，將子控件放在主軸中間位置。
複製代碼

下面這三個屬性須要特別關注一下：

// 將主軸方向上的空白區域等分，使得子孩子控件之間的空白區域相等，
// 兩端的子孩子控件都靠近首尾，沒有間隙。
四、MainAxisAlignment.spaceBetween 

// 將主軸方向上的空白區域等分，使得子孩子控件之間的空白區域相等，
// 兩端的子孩子控件都靠近首尾，首尾子孩子控件的空白區域爲1/2。
五、MainAxisAlignment.spaceAround 

// 將主軸方向上的空白區域等分，使得子孩子控件之間的空白區域相等，包括首尾。
六、MainAxisAlignment.spaceEvenly

複製代碼

CrossAxisAlignment是設置交叉軸方向的對齊方式，好比當前給 Row 組件設置 CrossAxisAlignment 屬性，那麼它的交叉軸爲垂直方向。若是咱們給 Column 組件設置 CrossAxisAlignment 屬性，那麼它的交叉軸爲水平方向。

CrossAxisAlignment 有5個屬性值，默認值爲center，分別是：

CrossAxisAlignment.start, 子孩子控件顯示在交叉軸的起始位置。
CrossAxisAlignment.end, 子孩子控件顯示在交叉軸的末尾位置。
CrossAxisAlignment.center, 子孩子控件顯示在交叉軸的中間位置。
CrossAxisAlignment.stretch, 子孩子控件徹底填充交叉軸方向的空間。
CrossAxisAlignment.baseline, 讓子孩子控件的baseline在交叉軸方向對齊。
複製代碼

具體的示例以下：

（1）Row的子孩子組件對齊

下面這個是Row的子孩子組件對齊的示例：

示例中設置的主軸的屬性值是：MainAxisAlignment.spaceEvenly，交叉軸的屬性值是：CrossAxisAlignment.end

使用圖示以下圖所示：

（2）Column的子孩子組件對齊

下面這個是Column的子孩子組件對齊的示例：

示例中設置的主軸的屬性值是：MainAxisAlignment.spaceEvenly，交叉軸的屬性值是：CrossAxisAlignment.end

使用圖示以下圖所示：

---

在Android中 layout_weight 是LinearLayout裏面的屬性，它是用來給子孩子設置權重的，表示給子孩子按照設置的比例去分配空間。在Flutter中咱們可使用 Expanded 包裹Row或Column組件,使用 Expanded 組件裏面的 flex屬性 去實現一樣的效果。

先來看看Row是會如何給子孩子設置權重的，示例代碼以下所示：

上例中我寫了一個Row，裏面有3個並排的Icon組件，權重分別是一、二、5，爲了好區分，我給每一個Icon加了不一樣的背景顏色。爲了代碼更優雅，我封裝了一個buildIcon(IconData icon, {int flex = 1, Color color}) 函數，IconData是必須傳入的參數; 參數2是權重，默認值爲1; 參數3是組件的背景顏色，參數2和參數3是可選參數，能夠根據須要進行傳入。

咱們看看效果圖，如圖所示：

同理，咱們只須要把上例中的 new Row替換成new Column就能夠實現垂直方向設置權重，如上圖右邊所示。

---

在Flutter中的Row或Column中關於 direction 有2個須要掌握的屬性，分別是：textDirection 以及verticalDirection。其中textDirection屬性在Row組件中起到很大做用，verticalDirection屬性在Column組件中起到很大做用。

textDirection 的屬性值爲 TextDirection.ltr，表示全部的子控件都是從左到右順序排列，這是默認值。若是爲TextDirection.rtl 表示從右邊開始向左邊倒序排列。

verticalDirection 的屬性值爲 VerticalDirection.down, 表示全部的子控件都是從上到下順序排列。若是爲VerticalDirection.up 從底部開始向上倒序排列。

先來看看Row中是如何使用的，咱們這裏使用的 textDirection 屬性，是仍是拿本章一開始的那個例子作修改，核心代碼以下所示：

再來看看Column是如何使用的，能夠看出只須要把 textDirection 屬性換成 verticalDirection 就能夠了。是否是很簡單？

咱們看一下效果圖，如圖所示：