Flutter布局

https://flutter.io/layout/

当你箱子约束布局遇到一些困难时,可以查看文档:

• Introduction
• Unbounded constraints
• Flex

介绍:

在Flutter,控件由RenderBox对象来渲染的.Render box由父节点给出约束,自己在约束范围内决定大小.约束由高宽最大最小值组成.

通常,有三类箱子,区别在于他们如何处理约束:

尽量占用空间的,像Center,ListView.

与子元素同大小的,Transform,Opacity.

特定大小的,像Image,Text

一些控件,如Container,由构造函数参数不同而不同.默认是充满空间,如果给定宽值,就会成为特定大小的.

其它的一些,如Row,Column,也不同于前面的约束,他们是由Flex布局模型控制的.

约束有时比较"紧",可能没有空间留下了,如果最大与最小是相同的,就表示是紧的宽.像示例中的控件,RenderView类给定了空间,展示充满它的内容区大小,这个是build方法里约束的.在Flutter里的多数箱子,尤其是只有一个子元素的,会传递约束到子元素.如果你内嵌了箱子,这些会受到渲染树的约束限制的.

有一些箱子的失去某些约束,像Center,只有最大,没有最小约束.

无限的约束:

某些情况下,约束是无限的.表示最大高与宽都是double.INFINITY.

一个无限约束的箱子,想要它尽量占满空间是无效的.在选择模式下,会抛出异常.

最常见的情况是,当一个渲染箱子,自己是无限约束的,在Flex箱子里,存在滚动的区间.

(这段意思我理解是,像ScrollView,ListView里的子元素,它不设置约束宽高,默认就应该是充满父节点的)

ListView是要充满父容器的,如果内嵌了一个ListView在水平的ListView里面内嵌的也会尽量充满父容器,

Flex

flex箱子,基于它们定好的方向上的箱子,可以有限也无限

有限的约束,会在它们方向上的约束一样大

无限约束,它们会把子元素在给定方向上充满空间.这种情况下,你不能设置flex==0外的值在子元素上.控件库中,Flex在另一个flex或滚动的控件里的的时候,无法使用expaned.如果使用了,会抛出异常.

跨方向的,像Column的宽/Row的高,需要是无限的,否则无法定位子元素.

如果理解了Android里面的ConstratLayout布局,就很容易地理解了flex了,如果想深入了解flex,可以查看flexlayout布局,由facebook出品,google改造.

现在很多h5页也是由flex box完成的.