Flutter 之弹性布局(Flex,Expanded)

介绍

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

1:Flex

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

弹性布局的方向, Row默认为水平方向,Column默认为垂直方向
Flex继承自MultiChildRenderObjectWidget,对应的RenderObject为
RenderFlex。RenderFlex中实现了其布局算法。

2:Expanded

简述:可以按比例“扩伸” Row、Column和Flex子组件所占用的空间。

使用:
flex参数为弹性系数,如果为0或null,则child是没有弹性的,即不会被扩伸占用的空间。如果大于0,所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 本文的目的是为了让读者掌握不同布局类Widget的布局特点,分享一些在实际使用过程遇到的一些问题,在《Flu...
    xqqlv阅读 5,310评论 0 18
  • Widget 分类 widget 其实是Element 的配置文件,而Element是右RenderObject ...
    Ray_lawq阅读 740评论 0 1
  • 弹性布局 Flex 弹性布局 弹性布局允许子widget按照一定比例来分配父容器空间,弹性布局的概念在其UI系统中...
    charmingcheng阅读 556评论 0 0
  • 电话响了,来电显示是学生家长打来的。学生已经毕业二年了,这时候打电话,有什么事? 接电话,电话传来那头的声音:我是...
    强哥的诗文阅读 366评论 0 0
  • Node.js 中的并发安全问题 简介 Node.js 采用非阻塞异步IO的方式来处理请求。基于 Libuv 的事...
    cooody阅读 2,975评论 0 1