Flutter入門筆記系列文章部分內(nèi)容來源于《Flutter 實(shí)戰(zhàn)》吨些，如有侵權(quán)請聯(lián)系刪除吮龄！
彈性布局允許子組件按照一定比例來分配父容器空間（聽起來有點(diǎn)像Android的LinearLayout內(nèi)部使用weight屬性設(shè)置子元素所占比例）滚秩。彈性布局的概念在其它UI系統(tǒng)中也都存在，如H5中的彈性盒子布局巍耗，Android中的FlexboxLayout等。Flutter中的彈性布局主要通過Flex和Expanded來配合實(shí)現(xiàn)歹河。
Flex
Flex組件可以沿著水平或垂直方向排列子組件奏甫，如果你知道主軸方向尖飞，使用Row或Column會方便一些症副，因?yàn)镽ow和Column都繼承自Flex店雅，參數(shù)基本相同，所以能使用Flex的地方基本上都可以使用Row或Column贞铣。Flex本身功能是很強(qiáng)大的闹啦，它也可以和Expanded組件配合實(shí)現(xiàn)彈性布局。接下來我們只討論Flex和彈性布局相關(guān)的屬性(其它屬性已經(jīng)在介紹Row和Column時(shí)介紹過了)辕坝。
既然要和Expanded組件配合使用窍奋，那就先介紹一下Expanded吧！
Expanded
Expanded的作用就是：可以按比例“擴(kuò)伸” Row酱畅、Column和Flex子組件所占用的空間琳袄。
const Expanded({
Key key,
int flex = 1,
@required Widget child,
})
flex 為彈性系數(shù)，如果為0或null纺酸，則child是沒有彈性的窖逗，即不會被擴(kuò)伸占用的空間。如果大于0餐蔬，所有的Expanded按照其flex的比例來分割主軸的全部空閑空間碎紊。
body: Container(
color: Colors.blue,
child: Flex(
direction: Axis.horizontal,
children: <Widget>[
Expanded(
child: RaisedButton(
child: Text("AAAAAAAAAAAAAAAAAAAA"),
onPressed: () {},
),
flex: 2,
),
Expanded(
child: RaisedButton(
child: Text("AAAAAAAAAAAAAAAAAAAA"),
onPressed: () {},
),
flex: 1,
),
],
))
運(yùn)行效果
比例分割空間
