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
,分別是:
1、MainAxisAlignment.start,將子控件放在主軸的起始位置。
2、MainAxisAlignment.end,將子控件放在主軸末尾。
3、MainAxisAlignment.center,將子控件放在主軸中間位置。
下面這三個屬性需要特別關注一下:
// 將主軸方向上的空白區域等分,使得子控件之間的空白區域相等,
// 兩端的子控件都靠近首尾,沒有間隙。
4、MainAxisAlignment.spaceBetween
// 將主軸方向上的空白區域等分,使得子控件之間的空白區域相等,
// 兩端的子控件都靠近首尾,首尾子控件的空白區域爲1/2。
5、MainAxisAlignment.spaceAround
// 將主軸方向上的空白區域等分,使得子控件之間的空白區域相等,包括首尾。
6、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組件,權重分別是1、2、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 就可以了。是不是很簡單?
我們看一下效果圖,如圖所示: