Flutter中的Flex布局(弹性布局)
Flex是当前最流行一种的布局方式,Flex可以自动计算大小,均匀地分配父容器空间,因此在布局过程中,我们只需要关注父容器的大小和位置就能完成布局。
Flutter里的Flex布局中与Web中的Flex布局不同的是,子组件不允许溢出Flex组件的,而Web中是溢出后自动折行的。
注:在Flutter中允许折行的布局叫做Wrap布局(流式布局)。

为了解决这个问题,就需要引入Expanded组件,这个组件的flex参数为弹性系数,如果为0或者null,则表示没有弹性,不会自动伸缩所占空间。
弹性系数作用可以理解为把主轴的长度平均分为弹性系数之和的份数,每个子元素会根据弹性系数占据不同的份数,有了系数的限制,子元素就不会溢出主轴了。

举个例子:
效果图:
