布局类组件-弹性布局(Flex)

弹性布局允许子组件按照一定比例来分配父容器空间。弹性布局的概念在其他UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等。Flutter中的弹性布局主要通过Flex和Expanded来配合实现。

Flex

Flex组件可以沿着水平或者垂直方向排列子组件,如果你知道主轴方向,使用Row或者Column会方便一些,因为Row和Column都继承自Flex,参数基本相同,所以能使用Flex的地方基本上都可以使用Row或者Column。Flex本身功能是很强大的,它也可以和Expanded 组件配合实现弹性布局,接下来我们只讨论Flex和弹性布局相关的属性

Flex继承自MultiChildRenderObjectWidget,对应的RenderObject为RenderFlex,RenderFlex中实现了其布局算法。

Expanded

可以按比例扩伸Row,Column和Flex子组件所占用的空间

flex参数为弹性系数,如果为0或null,则child是没有弹性的,即不会被扩伸占用的空间,如果大于0,所有的Expanded 按照其flex的比例来分割主轴的全部空闲空间

弹性布局比较简单,唯一需要注意的就是Row,Column以及Flex的关系

你可能感兴趣的:(布局类组件-弹性布局(Flex))