1. 簡(jiǎn)述

Row和Column分別是橫向布局和縱向布局，對(duì)標(biāo)Android中的LinearLayout

    <!--  Row  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="wrap_content">

    </LinearLayout>
    
    <!--  Column  -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:layout_height="match_parent">

    </LinearLayout>

Row和Column默認(rèn)會(huì)在主軸方向取最大，即上面XML代碼中展示的，Row相對(duì)應(yīng)LinearLayout的layout_width為match_parent，Column相對(duì)應(yīng)LinearLayout的layout_height為match_parent甫煞。

2. 使用

Row和Column的使用相似菇曲，以Column為例看一下構(gòu)造方法

Column({
    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>[],
  })

a) mainAxisAlignment

主軸的對(duì)齊方式，默認(rèn)為MainAxisAlignment.start抚吠，即在布局的開始進(jìn)行children的排列常潮，下面列下所有的主軸對(duì)中mode：

• start
• end
• center
• spaceBetween
• spaceAround
• spaceEvenly

start、end楷力、center這里不需要多說喊式，Android轉(zhuǎn)過來的同學(xué)了若指掌孵户。

spaceBetween

Place the free space evenly between the children.
將空閑空間均勻地放在孩子之間

將空間均勻的分布在children之間，并且布局兩頭的child會(huì)抵住布局的兩端岔留，不留空間夏哭。

Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
        Icon(Icons.ac_unit),
        Icon(Icons.ac_unit),
        Icon(Icons.ac_unit),
    ],
)

以上面的Column代碼為例，展現(xiàn)的效果圖為

<img src="https://upload-images.jianshu.io/upload_images/4025850-8973ee9114cc26aa.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="screenshot-1569483899301.jpg" style="zoom: 25%;" />

spaceAround

Place the free space evenly between the children as well as half of that space before and after the first and last child.

在第一個(gè)和最后一個(gè)孩子之前和之后的子對(duì)象之間以及剩余空間的一半之間均勻地分配可用空間

通俗來講献联，就是將空間按children的數(shù)量進(jìn)行等分竖配，并且child在分配的空間居中顯示，代碼與上面相同里逆，僅改變MainAxisAlignment.spaceBetween為MainAxisAlignment.spaceAround

<img src="https://upload-images.jianshu.io/upload_images/4025850-9b26808e12a868cd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="screenshot-1569484302267.jpg" style="zoom:25%;" />

可以明顯看出进胯，第一個(gè)child的上面空間，是其下面空間的一半>原押。

spaceEvenly

Place the free space evenly between the children as well as before and after the first and last child.

在第一個(gè)和最后一個(gè)孩子之前和之后的孩子之間均勻地分配可用空間胁镐。

均勻的分配空間，這里可以看做將空間減去children所占空間后诸衔，按children的count+1等分盯漂，并且將child放在兩個(gè)空間的中間：

<img src="https://upload-images.jianshu.io/upload_images/4025850-03891bd6d0b765f7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="screenshot-1569484756442.jpg" style="zoom:25%;" />

child的上下空間一樣，并且與兩端的child相距邊緣的空間也一致署隘，可以數(shù)到宠能，被child分割的大小相同的空間，共有children.count+1份磁餐。

b) mainAxisSize

主軸的尺寸违崇，即我們前面說的，Column和Row默認(rèn)下主軸方向取最大诊霹。

這里可選擇的屬性只有兩種：

• max
• min

相對(duì)應(yīng)的羞延，即為Android的match_parent和wrap_content

c) crossAxisAlignment

副軸對(duì)齊方式，Column的主軸是縱軸脾还，相對(duì)應(yīng)的副軸就是橫軸伴箩。

依然列出所有mode：

• start
• end
• center
• stretch
• baseline

因?yàn)閎aseline的特殊性，這次用Row作為示例鄙漏。依然對(duì)前三個(gè)予以蔑視嗤谚。

Row(
    children: <Widget>[
        Container(
            color: Colors.greenAccent,
            child: Icon(Icons.accessibility),
        ),
        Container(
            color: Colors.amberAccent,
            child: Icon(Icons.accessibility),
        ),
        Container(
            color: Colors.blue,
            child: Icon(Icons.accessibility),
        ),
    ],
)

<img src="https://upload-images.jianshu.io/upload_images/4025850-8afe990cf13bcdfc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="screenshot-1569488114614.jpg" style="zoom:25%;" />

stretch

Require the children to fill the cross axis.

This causes the constraints passed to the children to be tight in the cross axis.

要求孩子填充交叉軸巩步。

這導(dǎo)致傳遞給子代的約束在交叉軸上很緊桦踊。

就是讓child在副軸的方向取最大

<img src="https://upload-images.jianshu.io/upload_images/4025850-b02fb1d8eaf249da.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="screenshot-1569488186976.jpg" style="zoom:25%;" />

baseline & TextBaseline

Place the children along the cross axis such that their baselines match.
If the main axis is vertical, then this value is treated like [start]
(since baselines are always horizontal).
沿十字軸放置孩子，使其基線匹配离福。
如果主軸是垂直的妖爷，則將此值視為[start]（因?yàn)榛€始終是水平的）。

這個(gè)屬性對(duì)應(yīng)的是文字基線對(duì)齊赠涮，要配合TextBaseline屬性來使用笋除。

TextBaseline包含兩個(gè)屬性：alphabetic（字母）炸裆、ideographic（表意）

<img src="https://upload-images.jianshu.io/upload_images/4025850-77747d4517063e48.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="screenshot-1569548619278.jpg" style="zoom:25%;" />

不過，修改兩個(gè)屬性国拇，是真的沒有發(fā)現(xiàn)文字對(duì)齊有什么不一樣酱吝，抱歉务热。

d) textDirection

A direction in which text flows.

文字流動(dòng)的方向

可以理解為橫向的排布方向，這里有兩個(gè)屬性可選：

• ltr（left to right）
• rtl（right to left）

正常情況下崎岂，系統(tǒng)默認(rèn)為ltr冲甘，兩者對(duì)比如下：

ltr

<img src="https://upload-images.jianshu.io/upload_images/4025850-f65b631bcf350028.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png" style="zoom: 67%;" />

rtl

<img src="https://upload-images.jianshu.io/upload_images/4025850-cd62f7c88102194f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png" style="zoom:67%;" />

e) verticalDirection

A direction in which boxes flow vertically.

垂直流動(dòng)的方向

就是縱向的排布方向江醇，也是有兩個(gè)屬性可選：

• up
• down

系統(tǒng)默認(rèn)為down何暇，即向下流動(dòng)（從上往下排列）赖晶，因?yàn)楹蛅extDirection屬性太相似，這里不單獨(dú)截圖做對(duì)比捂贿。

f) children

最后的關(guān)鍵胳嘲，孩子們。

children的屬性是List<Widget>颜屠，使用方式前面代碼里面已經(jīng)展示甫窟，需要注意的一點(diǎn)就是children總大小不要超過了Column&Row的長(zhǎng)寬蛙婴，不然會(huì)報(bào)錯(cuò)街图，這點(diǎn)和Android還是有點(diǎn)差別的。

3. 總結(jié)

從Android轉(zhuǎn)到Flutter的同學(xué)可以放心的食用Column&Row耘擂，腦中就想著在使用LinearLayout就可以了醉冤。

• Column為縱向布局滚朵，Row為橫向布局
• 主軸方向和副軸方向上的對(duì)齊方式都有多重選擇
• 主軸方向默認(rèn)取最大，可以設(shè)置為取最小
• 涉及到文字排布時(shí)韵吨，可以使用baseline&textBaseline來使排版更好看
• 主軸方向的排列順序也可以設(shè)置
  • Column對(duì)應(yīng)verticalDirection
  • Row對(duì)應(yīng)textDirection
• 布置孩子時(shí)归粉，需要注意總長(zhǎng)寬不可以大于Row&Column的長(zhǎng)寬漏峰，不然會(huì)報(bào)異常