版權(quán)聲明：本文首發(fā)在公眾號(hào)Flutter那些事谜洽，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載。

本文示例代碼發(fā)布在Github滥壕，地址為: https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/README-CN.md

Flutter系列博文鏈接 ↓：

工具安裝：

• Flutter從配置安裝到填坑指南詳解

Flutter基礎(chǔ)篇：

• 谷歌Flutter1.0正式版發(fā)布
• Flutter基礎(chǔ)篇（1）-- 跨平臺(tái)開發(fā)框架和工具集錦
• Flutter基礎(chǔ)篇（2）-- 老司機(jī)用一篇博客帶你快速熟悉Dart語(yǔ)法
• Flutter基礎(chǔ)篇（3）-- Flutter基礎(chǔ)全面詳解
• Flutter基礎(chǔ)篇（4）-- Flutter填坑全面總結(jié)
• Flutter基礎(chǔ)篇（5）-- Flutter代碼模板蒿偎，解放雙手朽们，提高開發(fā)效率必備
• Flutter基礎(chǔ)篇（6）-- 水平和垂直布局詳解
• Flutter基礎(chǔ)篇（7）-- Flutter更新錯(cuò)誤全面解決方案(圖文+視頻講解)
• Flutter基礎(chǔ)篇（8）-- Flutter for Web詳細(xì)介紹
• Flutter基礎(chǔ)篇（9）-- 手把手教你用Flutter實(shí)現(xiàn)Web頁(yè)面編寫
• Flutter1.9升級(jí)體驗(yàn)總結(jié)（Flutter Web 1.9最新版本填坑指南）

Flutter進(jìn)階篇：

• Flutter進(jìn)階篇（1）-- 手把手帶你快速上手調(diào)試Flutter項(xiàng)目
• Flutter進(jìn)階篇（2）-- Flutter路由詳解
• Flutter進(jìn)階篇（3）-- Flutter 的手勢(shì)（GestureDetector）分析詳解
• Flutter進(jìn)階篇（4）-- Flutter的Future異步詳解
• Flutter進(jìn)階篇（5）-- 使用Flutter創(chuàng)建插件詳解并發(fā)布到Pub庫(kù)
• Flutter進(jìn)階篇（6）-- PageStorageKey怀读、PageStorageBucket和PageStorage使用詳解
• Flutter進(jìn)階篇（7）-- Flutter路由輕量級(jí)框架FRouter

Dart語(yǔ)法系列博文鏈接 ↓：

Dart語(yǔ)法基礎(chǔ)篇：

• Flutter基礎(chǔ)篇（2）-- 老司機(jī)用一篇博客帶你快速熟悉Dart語(yǔ)法(這是Dart語(yǔ)法系列的第一篇)
• Dart的語(yǔ)法詳解系列篇（二）-- 類與函數(shù)
• Dart的語(yǔ)法詳解系列篇（三）-- mixin入門
• Dart的語(yǔ)法詳解系列篇（四）-- 泛型、異步骑脱、庫(kù)等有關(guān)詳解
• Dart2.6正式版發(fā)布菜枷，支持編譯為native可執(zhí)行文件

Dart語(yǔ)法進(jìn)階篇：

• Dart語(yǔ)法進(jìn)階篇（一）-- Dart源碼的排序算法詳解

先來(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組件如果沒(méi)有設(shè)置mainAxisSize屬性，默認(rèn)為max屬性值摊沉。第二小節(jié)中的Row/Column組件我們并沒(méi)有設(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ū)域相等铐然，
// 兩端的子控件都靠近首尾，沒(méi)有間隙恶座。
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中 layout_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屬性

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

使用效果圖