1. Flex組件
事實(shí)上撇簿，我們即將學(xué)習(xí)的Row組件和Column組件都繼承自Flex組件聂渊。
- Flex組件和Row、Column屬性主要的區(qū)別就是多一個(gè)direction四瘫。
- 當(dāng)direction的值為Axis.horizontal的時(shí)候汉嗽，則是Row。
- 當(dāng)direction的值為Axis.vertical的時(shí)候找蜜，則是Column饼暑。
2. Row組件
Row組件用于將所有的子Widget排成一行，實(shí)際上這種布局應(yīng)該是借鑒于Web的Flex布局。
從源碼中查看Row的屬性：
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, // 主軸對(duì)齊方式
MainAxisSize mainAxisSize = MainAxisSize.max, // 水平方向盡可能大
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 交叉處對(duì)齊方式
TextDirection textDirection, // 水平方向子widget的布局順序（默認(rèn)為系統(tǒng)當(dāng)前Locale環(huán)境的文本方向(如中文弓叛、英語(yǔ)都是從左往右彰居，而阿拉伯語(yǔ)是從右往左））
VerticalDirection verticalDirection = VerticalDirection.down, // 表示Row縱軸（垂直）的對(duì)齊方向
TextBaseline textBaseline, // 如果上面是baseline對(duì)齊方式，那么選擇什么模式（有兩種可選）
List<Widget> children = const <Widget>[],
})
部分屬性詳細(xì)解析：
mainAxisSize：
- 表示Row在主軸(水平)方向占用的空間撰筷，默認(rèn)是MainAxisSize.max陈惰，表示盡可能多的占用水平方向的空間，此時(shí)無(wú)論子widgets實(shí)際占用多少水平空間闭专，Row的寬度始終等于水平方向的最大寬度
- 而MainAxisSize.min表示盡可能少的占用水平空間奴潘，當(dāng)子widgets沒(méi)有占滿水平剩余空間，則Row的實(shí)際寬度等于所有子widgets占用的的水平空間影钉；
mainAxisAlignment：表示子Widgets在Row所占用的水平空間內(nèi)對(duì)齊方式
- 如果mainAxisSize值為MainAxisSize.min画髓，則此屬性無(wú)意義，因?yàn)樽觲idgets的寬度等于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ì)齊蜡塌。
crossAxisAlignment：表示子Widgets在縱軸方向的對(duì)齊方式
- Row的高度等于子Widgets中最高的子元素高度
- 它的取值和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正好相反
image.png
2.1 Expanded
如果我們希望紅色和黃色的Container Widget不要設(shè)置固定的寬度铁孵，而是占據(jù)剩余的部分，這個(gè)時(shí)候應(yīng)該如何處理呢房资？
這個(gè)時(shí)候我們可以使用 Expanded 來(lái)包裹 Container Widget蜕劝，并且將它的寬度不設(shè)置值；
-
flex屬性轰异，彈性系數(shù)岖沛，Row會(huì)根據(jù)兩個(gè)Expanded的彈性系數(shù)來(lái)決定它們占據(jù)剩下空間的比例
image.png
3. Column組件
Column組件用于將所有的子Widget排成一列，學(xué)會(huì)了前面的Row后搭独，Column只是和row的方向不同而已烫止。
我們直接看它的源碼：我們發(fā)現(xiàn)和Row屬性是一致的，不再解釋
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>[],
})
學(xué)習(xí)內(nèi)容來(lái)自Flutter從入門(mén)到實(shí)戰(zhàn)
