美文网首页flutter
Flutter 之弹性布局(Flex,Expanded)

Flutter 之弹性布局(Flex,Expanded)

作者: 总会颠沛流离 | 来源:发表于2020-03-12 11:04 被阅读0次

介绍

弹性布局允许子组件按照一定比例来分配父容器空间。弹性布局的概念在其它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的比例来分割主轴的全部空闲空间。

相关文章

  • Flutter 之弹性布局(Flex,Expanded)

    介绍 弹性布局允许子组件按照一定比例来分配父容器空间。弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布...

  • 弹性布局

    弹性布局允许子组件按照一定比例来分配父容器空间。Flutter中的弹性布局主要通过Flex和Expanded来配合...

  • Flutter学习笔记12-弹性布局(Flex和Expanded

    弹性布局允许子组件按照一定比例来分配父容器空间。Flutter中的弹性布局主要通过Flex和Expanded来配合...

  • Flutter widget3

    widget 综合布局 弹性布局:Flex ,Expanded线性布局:Row,Column--(都继承Flex)...

  • Flutter布局和容器

    布局 1. Flex Flex布局,配合子元素Expanded弹性布局 direction: 方向, Axis.h...

  • css:About Flex

    * 弹性布局 * 创建弹性布局容器:flex containerdisplay:flex 1.弹性元素 flex ...

  • flutter基础-看完这篇就可以撸app了-有TabBar介绍

    flutter基础-看完这篇就可以撸app了 flex弹性布局学习总结 flutter layout widget...

  • flutter 弹性布局Flex

    弹性布局 弹性布局允许子widget按照一定比例来分配父容器空间,弹性布局的概念在其UI系统中也都存在,如H5中的...

  • Flutter 弹性布局 Flex

    Flex 有一个必填参数:direction,用于确定主轴的方向,然后就可以在 children 里写 子Widg...

  • CSS3弹性布局 flexible boxes

    W3弹性布局: 弹性布局父容器(Flex Containers) 弹性布局子项(Flex Items) 子项于父容...

网友评论

    本文标题:Flutter 之弹性布局(Flex,Expanded)

    本文链接:https://www.haomeiwen.com/subject/jemyjhtx.html