先來(lái)看看本文的目錄勤众，如下圖所示：
本文目錄
在原生Android開發(fā)中屹电，我們經(jīng)常會(huì)用LinearLayout來(lái)達(dá)到水平或垂直方向的布局懂傀，在Flutter中有兩個(gè)常用的組件也能夠做到類似的效果兄裂，分別是Row和Column組件脑慧，Row組件主要功能是處理水平方向的布局枣察，Column組件主要功能是處理垂直方向的布局争占。下文會(huì)具體講解在Flutter中如何使用Row和Column組件實(shí)現(xiàn)LinearLayout效果，以及兩者之間的對(duì)比序目，方便大家對(duì)比學(xué)習(xí)臂痕。
LinearLayout 里面的android:orientation="horizontal”屬性相當(dāng)于Row組件，LinearLayout 里面的 android:orientation="vertical”屬性相當(dāng)于Column組件猿涨。
Flutter和LinearLayout的對(duì)比圖示如下：
安卓的orientation屬性在Flutter中的體現(xiàn)
Row的使用示例代碼如下所示：
Row的使用示例代碼
Column的使用示例代碼如下所示：
Column的使用示例代碼
Flutter中的Row以及Column使用效果圖如下所示：
Flutter中的Row以及Column使用效果圖
這里是Android里面的使用（由于Flutter效果和Android的是一樣的握童，后文的安卓效果圖就不再展示了）
Android里面的使用
LinearLayout 里面的android:layout_width="wrap_content"或者 android:layout_height="wrap_content"屬性相當(dāng)于Row/Column組件里面的MainAxisSize.min屬性。
LinearLayout 里面的android:layout_width="match_parent"或者android:layout_height="match_parent"屬性相當(dāng)于Row/Column組件里面的MainAxisSize.max屬性叛赚。Row/Column組件如果沒有設(shè)置mainAxisSize屬性澡绩，默認(rèn)為max屬性值。第二小節(jié)中的Row/Column組件我們并沒有設(shè)置mainAxisSize屬性俺附，但是我們可以看到它的效果是MainAxisSize.max 屬性的效果（Row自動(dòng)填充寬為屏幕的寬英古，Column自動(dòng)填充高為屏幕的高）。
Flutter和LinearLayout的對(duì)比圖示如下：
Flutter和LinearLayout的對(duì)比圖
Flutter使用圖解如下：
Flutter中使用 MainAxisSize.max 效果圖
Flutter中使用 MainAxisSize.min 效果圖
這個(gè)是最復(fù)雜的昙读，需要重點(diǎn)掌握召调。gravity屬性在Android里面是用于指定控件本身或子控件的對(duì)齊屬性。在Flutter中我們可以使用Row/Column組件的MainAxisAlignment以及CrossAxisAlignment實(shí)現(xiàn)控件的對(duì)齊效果蛮浑。
MainAxisAlignment是設(shè)置主軸方向的對(duì)齊方式唠叛。如果我們給Row組件設(shè)置MainAxisAlignment屬性，那么它的主軸為水平方向沮稚。如果我們給Column組件設(shè)置MainAxisAlignment屬性艺沼，那么它的主軸為垂直方向。
MainAxisAlignment有6個(gè)屬性值蕴掏，默認(rèn)值為start障般，分別是：
1调鲸、MainAxisAlignment.start，將子控件放在主軸的起始位置挽荡。2藐石、MainAxisAlignment.end，將子控件放在主軸末尾定拟。3于微、MainAxisAlignment.center，將子控件放在主軸中間位置青自。
下面這三個(gè)屬性需要特別關(guān)注一下：
// 將主軸方向上的空白區(qū)域等分株依，使得子控件之間的空白區(qū)域相等，// 兩端的子控件都靠近首尾延窜，沒有間隙恋腕。4、MainAxisAlignment.spaceBetween// 將主軸方向上的空白區(qū)域等分逆瑞，使得子控件之間的空白區(qū)域相等荠藤，// 兩端的子控件都靠近首尾，首尾子控件的空白區(qū)域?yàn)?/2呆万。5商源、MainAxisAlignment.spaceAround// 將主軸方向上的空白區(qū)域等分车份，使得子控件之間的空白區(qū)域相等谋减，包括首尾。6扫沼、MainAxisAlignment.spaceEvenly
CrossAxisAlignment是設(shè)置交叉軸方向的對(duì)齊方式出爹，比如當(dāng)前給Row組件設(shè)置CrossAxisAlignment屬性，那么它的交叉軸為垂直方向缎除。如果我們給Column組件設(shè)置CrossAxisAlignment屬性严就，那么它的交叉軸為水平方向。
CrossAxisAlignment有5個(gè)屬性值器罐，默認(rèn)值為center梢为，分別是：
CrossAxisAlignment.start, 子控件顯示在交叉軸的起始位置。CrossAxisAlignment.end, 子控件顯示在交叉軸的末尾位置轰坊。CrossAxisAlignment.center, 子控件顯示在交叉軸的中間位置铸董。CrossAxisAlignment.stretch, 子控件完全填充交叉軸方向的空間。CrossAxisAlignment.baseline, 讓子控件的baseline在交叉軸方向?qū)R肴沫。
具體的示例如下：
（1）Row的子組件對(duì)齊
下面這個(gè)是Row的子組件對(duì)齊的示例：
示例中設(shè)置的主軸的屬性值是：MainAxisAlignment.spaceEvenly粟害，交叉軸的屬性值是：CrossAxisAlignment.end
Row的子組件對(duì)齊示例代碼
使用圖示如下圖所示：
Row的子組件對(duì)齊效果圖
（2）Column的子組件對(duì)齊
下面這個(gè)是Column的子組件對(duì)齊的示例：
示例中設(shè)置的主軸的屬性值是：MainAxisAlignment.spaceEvenly，交叉軸的屬性值是：CrossAxisAlignment.end
Column的子組件對(duì)齊示例代碼
使用圖示如下圖所示：
Column的子組件對(duì)齊效果圖
在Android中l(wèi)ayout_weight是LinearLayout里面的屬性颤芬，它是用來(lái)給子設(shè)置權(quán)重的悲幅，表示給子按照設(shè)置的比例去分配空間套鹅。在Flutter中我們可以使用Expanded 包裹Row或Column組件,使用Expanded 組件里面的flex屬性去實(shí)現(xiàn)同樣的效果。
先來(lái)看看Row是會(huì)如何給子設(shè)置權(quán)重的汰具，示例代碼如下所示：
Row給子設(shè)置權(quán)重示例代碼
上例中我寫了一個(gè)Row卓鹿，里面有3個(gè)并排的Icon組件，權(quán)重分別是1郁副、2减牺、5，為了好區(qū)分存谎，我給每個(gè)Icon加了不同的背景顏色拔疚。為了代碼更優(yōu)雅，我封裝了一個(gè)buildIcon(IconData icon, {int flex = 1, Color color})函數(shù)既荚，IconData是必須傳入的參數(shù); 參數(shù)2是權(quán)重稚失，默認(rèn)值為1; 參數(shù)3是組件的背景顏色，參數(shù)2和參數(shù)3是可選參數(shù)恰聘，可以根據(jù)需要進(jìn)行傳入句各。
我們看看效果圖，如圖所示：
效果圖
同理晴叨，我們只需要把上例中的 new Row替換成new Column就可以實(shí)現(xiàn)垂直方向設(shè)置權(quán)重凿宾，如上圖右邊所示。
在Flutter中的Row或Column中關(guān)于direction有2個(gè)需要掌握的屬性兼蕊，分別是：textDirection 以及verticalDirection初厚。其中textDirection屬性在Row組件中起到很大作用，verticalDirection屬性在Column組件中起到很大作用孙技。
textDirection的屬性值為TextDirection.ltr产禾，表示所有的子控件都是從左到右順序排列，這是默認(rèn)值牵啦。如果為TextDirection.rtl表示從右邊開始向左邊倒序排列亚情。
verticalDirection的屬性值為VerticalDirection.down, 表示所有的子控件都是從上到下順序排列。如果為VerticalDirection.up從底部開始向上倒序排列哈雏。
先來(lái)看看Row中是如何使用的楞件，我們這里使用的textDirection屬性，是還是拿本章一開始的那個(gè)例子做修改裳瘪，核心代碼如下所示：
Row中使用textDirection屬性
再來(lái)看看Column是如何使用的土浸，可以看出只需要把textDirection屬性換成verticalDirection就可以了。是不是很簡(jiǎn)單盹愚？
Column中使用verticalDirection屬性
我們看一下效果圖栅迄，如圖所示：
