所謂線性布局呻征，即指沿水平所謂線性布局，即指沿水平或垂直方向排布子組件梯嗽。Flutter中通過(guò)Row和Column來(lái)實(shí)現(xiàn)線性布局匕得，類(lèi)似于Android中的LinearLayout控件。Row和Column都繼承自Flex栈虚，我將在彈性布局一節(jié)中詳細(xì)介紹Flex袖外。
主軸和縱軸
對(duì)于線性布局，有主軸和縱軸之分魂务，如果布局是沿水平方向曼验，那么主軸就是指水平方向，而縱軸即垂直方向粘姜；如果布局沿垂直方向鬓照，那么主軸就是指垂直方向，而縱軸就是水平方向孤紧。在線性布局中豺裆，有兩個(gè)定義對(duì)齊方式的枚舉類(lèi)MainAxisAlignment和CrossAxisAlignment，分別代表主軸對(duì)齊和縱軸對(duì)齊。
1:Row
Row可以在水平方向排列其子widget臭猜。定義如下：
Row({
...
TextDirection textDirection,
MainAxisSize mainAxisSize = MainAxisSize.max,
MainAxisAlignment mainAxisAlignment =
MainAxisAlignment.start,
VerticalDirection verticalDirection = VerticalDirection.down,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
List<Widget> children = const <Widget>[],
})
- textDirection：表示水平方向子組件的布局順序(是從左往右還是從右往左)躺酒，默認(rèn)為系統(tǒng)當(dāng)前Locale環(huán)境的文本方向(如中文、英語(yǔ)都是從左往右蔑歌，而阿拉伯語(yǔ)是從右往左)羹应。
- mainAxisSize：表示Row在主軸(水平)方向占用的空間，默認(rèn)是>->- MainAxisSize.max次屠，表示盡可能多的占用水平方向的空間园匹，此時(shí)無(wú)論子widgets實(shí)際占用多少水平空間，Row的寬度始終等于水平方向的最大寬度劫灶；而MainAxisSize.min表示盡可能少的占用水平空間偎肃，當(dāng)子組件沒(méi)有占滿水平剩余空間，則Row的實(shí)際寬度等于所有子組件占用的的水平空間浑此；
- mainAxisAlignment：表示子組件在Row所占用的水平空間內(nèi)對(duì)齊方式累颂，如果mainAxisSize值為MainAxisSize.min，則此屬性無(wú)意義凛俱，因?yàn)樽咏M件的寬度等于Row的寬度紊馏。只有當(dāng)mainAxisSize的值為MainAxisSize.max時(shí)，此屬性才有意義蒲犬，MainAxisAlignment.start表示沿textDirection的初始方向?qū)R朱监，如textDirection取值為T(mén)extDirection.ltr時(shí)，則MainAxisAlignment.start表示左對(duì)齊原叮，textDirection取值為T(mén)extDirection.rtl時(shí)表示從右對(duì)齊赫编。而MainAxisAlignment.end和MainAxisAlignment.start正好相反；MainAxisAlignment.center表示居中對(duì)齊奋隶。讀者可以這么理解：textDirection是mainAxisAlignment的參考系擂送。
- verticalDirection：表示Row縱軸（垂直）的對(duì)齊方向，默認(rèn)是VerticalDirection.down唯欣，表示從上到下嘹吨。
- crossAxisAlignment：表示子組件在縱軸方向的對(duì)齊方式，Row的高度等于子組件中最高的子元素高度境氢，它的取值和MainAxisAlignment一樣(包含start蟀拷、end、 center三個(gè)值)萍聊，不同的是crossAxisAlignment的參考系是verticalDirection问芬，即verticalDirection值為VerticalDirection.down時(shí)crossAxisAlignment.start指頂部對(duì)齊，verticalDirection值為VerticalDirection.up時(shí)寿桨，crossAxisAlignment.start指底部對(duì)齊此衅；而crossAxisAlignment.end和crossAxisAlignment.start正好相反；
-children ：子組件數(shù)組。
2：Column
Column可以在垂直方向排列其子組件炕柔。參數(shù)和Row一樣，不同的是布局方向?yàn)榇怪泵接叮鬏S縱軸正好相反匕累，讀者可類(lèi)比Row來(lái)理解
- 由于我們沒(méi)有指定Column的mainAxisSize，所以使用默認(rèn)值MainAxisSize.max默伍，則Column會(huì)在垂直方向占用盡可能多的空間欢嘿，此例中為屏幕高度。
- 由于我們指定了 crossAxisAlignment 屬性為CrossAxisAlignment.center也糊，那么子項(xiàng)在Column縱軸方向（此時(shí)為水平方向）會(huì)居中對(duì)齊炼蹦。注意，在水平方向?qū)R是有邊界的狸剃，總寬度為Column占用空間的實(shí)際寬度掐隐，而實(shí)際的寬度取決于子項(xiàng)中寬度最大的Widget。在本例中钞馁，Column有兩個(gè)子Widget虑省，而顯示“world”的Text寬度最大，所以Column的實(shí)際寬度則為T(mén)ext("world") 的寬度僧凰，所以居中對(duì)齊后Text("hi")會(huì)顯示在Text("world")的中間部分探颈。
實(shí)際上，Row和Column都只會(huì)在主軸方向占用盡可能大的空間训措，而縱軸的長(zhǎng)度則取決于他們最大子元素的長(zhǎng)度伪节。
3：特殊情況
如果Row里面嵌套R(shí)ow，或者Column里面再嵌套Column绩鸣，那么只有對(duì)最外面的Row或Column會(huì)占用盡可能大的空間怀大，里面Row或Column所占用的空間為實(shí)際大小 下面以Column為例說(shuō)明：
Container(
color: Colors.green,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max, //有效，外層Colum高度為整個(gè)屏幕
children: <Widget>[
Container(
color: Colors.red,
child: Column(
mainAxisSize: MainAxisSize.max,//無(wú)效呀闻，內(nèi)層Colum高度為實(shí)際高度
children: <Widget>[
Text("hello world "),
Text("I am Jack "),
],
),
)
],
),
),
);