欢迎光临散文网 会员登陆 & 注册

Flutter中的Flex布局(弹性布局)

2023-01-30 09:35 作者:一行小诗  | 我要投稿

Flex是当前最流行一种的布局方式,Flex可以自动计算大小,均匀地分配父容器空间,因此在布局过程中,我们只需要关注父容器的大小和位置就能完成布局。

Flutter里的Flex布局中与Web中的Flex布局不同的是,子组件不允许溢出Flex组件的,而Web中是溢出后自动折行的。

注:在Flutter中允许折行的布局叫做Wrap布局(流式布局)。

子元素的所占空间超过了Flex主轴的长度而报错

为了解决这个问题,就需要引入Expanded组件,这个组件的flex参数为弹性系数,如果为0或者null,则表示没有弹性,不会自动伸缩所占空间。

弹性系数作用可以理解为把主轴的长度平均分为弹性系数之和的份数,每个子元素会根据弹性系数占据不同的份数,有了系数的限制,子元素就不会溢出主轴了。

子元素大小公式

举个例子:

效果图:

Expanded组件为子元素提供弹性空间


Flutter中的Flex布局(弹性布局)的评论 (共 条)

分享到微博请遵守国家法律