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完成的.