Flutter中的Flex布局(彈性布局)
Flex是當(dāng)前最流行一種的布局方式,F(xiàn)lex可以自動(dòng)計(jì)算大小,均勻地分配父容器空間,因此在布局過程中,我們只需要關(guān)注父容器的大小和位置就能完成布局。
Flutter里的Flex布局中與Web中的Flex布局不同的是,子組件不允許溢出Flex組件的,而Web中是溢出后自動(dòng)折行的。
注:在Flutter中允許折行的布局叫做Wrap布局(流式布局)。

為了解決這個(gè)問題,就需要引入Expanded組件,這個(gè)組件的flex參數(shù)為彈性系數(shù),如果為0或者null,則表示沒有彈性,不會自動(dòng)伸縮所占空間。
彈性系數(shù)作用可以理解為把主軸的長度平均分為彈性系數(shù)之和的份數(shù),每個(gè)子元素會根據(jù)彈性系數(shù)占據(jù)不同的份數(shù),有了系數(shù)的限制,子元素就不會溢出主軸了。

舉個(gè)例子:
效果圖:

標(biāo)簽: