簡介
- Row 水平布局 類似于水平方向的LinearLayout
- Column垂直布局 類似于垂直方向的LinearLayout
Row 燃逻、Column繼承于Flex
主軸和縱軸
在Flutter中，對于線性布局來說猿涨，有主軸和縱軸之分姆怪，如果布局是沿水平方向舆瘪，那么主軸就是指水平方向，而縱軸即垂直方向昙读；如果布局沿垂直方向膨桥，那么主軸就是指垂直方向，而縱軸就是水平方向沮稚。在線性布局中册舞，有兩個(gè)定義對齊方式的枚舉類MainAxisAlignment和CrossAxisAlignment，分別代表主軸對齊和縱軸對齊盛杰。
Row
Row可以在水平方向排列子widget藐石。
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection, //方向 ltr 和 rtl
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline = TextBaseline.alphabetic,
List<Widget> children = const <Widget>[],
})
textDirection：表示水平方向子組件的布局順序(是從左往右還是從右往左)于微，默認(rèn)為系統(tǒng)當(dāng)前Locale環(huán)境的文本方向(如中文、英語都是從左往右驱证，而阿拉伯語是從右往左)勺三。
mainAxisSize：表示Row在主軸(水平)方向占用的空間，默認(rèn)是MainAxisSize.max祈远，表示盡可能多的占用水平方向的空間车份，此時(shí)無論子widgets實(shí)際占用多少水平空間牡彻，Row的寬度始終等于水平方向的最大寬度出爹；而MainAxisSize.min表示盡可能少的占用水平空間严就，當(dāng)子組件沒有占滿水平剩余空間器罐，則Row的實(shí)際寬度等于所有子組件占用的的水平空間；
mainAxisAlignment：表示子組件在Row所占用的水平空間內(nèi)對齊方式铸董，如果mainAxisSize值為MainAxisSize.min肴沫，則此屬性無意義颤芬，因?yàn)樽咏M件的寬度等于Row的寬度。只有當(dāng)mainAxisSize的值為MainAxisSize.max時(shí)夺艰，此屬性才有意義
沉衣，MainAxisAlignment.start表示沿textDirection的初始方向?qū)R，如textDirection取值為TextDirection.ltr時(shí)存谎，則MainAxisAlignment.start表示左對齊肥隆，textDirection取值為TextDirection.rtl時(shí)表示從右對齊。而MainAxisAlignment.end和MainAxisAlignment.start正好相反恰聘；MainAxisAlignment.center表示居中對齊晴叨。讀者可以這么理解：textDirection是mainAxisAlignment的參考系矾屯。verticalDirection：表示Row縱軸（垂直）的對齊方向，默認(rèn)是VerticalDirection.down孙技，表示從上到下。
crossAxisAlignment：表示子組件在縱軸方向的對齊方式牵啦，Row的高度等于子組件中最高的子元素高度，它的取值和MainAxisAlignment一樣(包含start蕾久、end、 center三個(gè)值)，不同的是crossAxisAlignment的參考系是 verticalDirection障簿，即verticalDirection值為VerticalDirection.down時(shí)crossAxisAlignment.start指頂部對齊站故，verticalDirection值為VerticalDirection.up時(shí)，crossAxisAlignment.start指底部對齊西篓；而crossAxisAlignment.end和crossAxisAlignment.start正好相反；
children ：子組件數(shù)組虱黄。
Row特點(diǎn)
* Row特點(diǎn):
* - 水平方向盡可能占據(jù)比較大的空間
* * 水平方向也是希望包裹內(nèi)容, 那么設(shè)置mainAxisSize = min
* - 垂直方向包裹內(nèi)容
* MainAxisAlignment:
* - start: 主軸的開始位置挨個(gè)擺放元素(默認(rèn)值)
* - end: 主軸的結(jié)束位置挨個(gè)擺放元素
* - center: 主軸的中心點(diǎn)對齊
* - spaceBetween: 左右兩邊的間距為0, 其它元素之間平分間距
* - spaceAround: 左右兩邊的間距是其它元素之間的間距的一半
* - spaceEvenly: 所有的間距平分空間
* CrossAxisAlignment:
* - start: 交叉軸的起始位置對齊
* - end: 交叉軸的結(jié)束位置對齊
* - center: 中心點(diǎn)對齊(默認(rèn)值)
* - baseline: 基線對齊(必須有文本的時(shí)候才起效果)
* - stretch: 先Row占據(jù)交叉軸盡可能大的空間, 將所有的子Widget交叉軸的高度, 拉伸到最大
Column
Column可以在垂直方向排列其子組件橱乱。參數(shù)和Row一樣粱甫，不同的是布局方向?yàn)榇怪保鬏S縱軸正好相反危纫。不在描述
特殊情況
如果Row里面嵌套Row乌庶，或者Column里面再嵌套Column，那么只有最外面的Row或Column會占用盡可能大的空間蛤吓，里面Row或Column所占用的空間為實(shí)際大小糠赦，
Flex（彈性布局）
Flex使用大致和Row一樣锅棕，只是多了個(gè) direction屬性
@required this.direction, //彈性布局的方向, Row默認(rèn)為水平方向裸燎，Column默認(rèn)為垂直方向
Flex主要用來實(shí)現(xiàn)類似LinearLayout中權(quán)重以及ConstraintLayout約束布局中chains 功能
Expanded
可以按比例“擴(kuò)伸” Row泼疑、Column和Flex子組件所占用的空間。（權(quán)重效果）
const Expanded({
Key key,
int flex = 1,
@required Widget child,
}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
flex參數(shù)為彈性系數(shù)移稳，如果為0或null个粱，則child是沒有彈性的翻翩，即不會被擴(kuò)伸占用的空間。如果大于0嫂冻，所有的Expanded按照其flex的比例來分割主軸的全部空閑空間。
return Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.baseline,
verticalDirection:VerticalDirection.down ,
children: [
Expanded(child: Container(width: 30,height: 60,color: Colors.red,),flex: 1,),
Container(width: 50,height: 40,color: Colors.orange,),
Container(width: 50,height: 30,color: Colors.blue,),
],
);
