4.1 布局类组件简介
#简介
布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排列(layout)方式不同。
Widget | 说明 | 用途 |
---|---|---|
LeafRenderObjectWidget | 非容器类组件基类 | Widget树的叶子节点,用于没有子节点的widget,通常基础组件都属于这一类,如Image。 |
SingleChildRenderObjectWidget | 单子组件基类 | 包含一个子Widget,如:ConstrainedBox、DecoratedBox等 |
MultiChildRenderObjectWidget | 多子组件基类 | 包含多个子Widget,一般都有一个children参数,接受一个Widget数组。如Row、Column、Stack等 |
布局类组件就是指直接或间接继承(包含)SingleChildRenderObjectWidget
和MultiChildRenderObjectWidget
的Widget,它们一般都会有一个child
或children
属性用于接收子 Widget。我们看一下继承关系 Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget 。
RenderObjectWidget
类中定义了创建、更新RenderObject
的方法,子类必须实现他们,关于RenderObject
我们现在只需要知道它是最终布局、渲染UI界面的对象即可,也就是说,对于布局类组件来说,其布局算法都是通过对应的RenderObject
对象来实现的,所以读者如果对接下来介绍的某个布局类组件的原理感兴趣,可以查看其对应的RenderObject
的实现,比如Stack
(层叠布局)对应的RenderObject
对象就是RenderStack
,而层叠布局的实现就在RenderStack
中。
在本章中,为了让读者对布局类 Widget 有个快速的认识,所以我们并不会深入到RenderObject
的细节中去。在学习本章时,读者的重点是掌握不同布局组件的布局特点,具体原理和细节等我们对 Flutter 整体入门后,感兴趣的话再去研究。
4.2 布局原理与约束(constraints)
尺寸限制类容器用于限制容器大小,Flutter中提供了多种这样的容器,如ConstrainedBox
、SizedBox
、UnconstrainedBox
、AspectRatio
等,本节将介绍一些常用的。
Flutter 中有两种布局模型:
- 基于 RenderBox 的盒模型布局。
- 基于 Sliver ( RenderSliver ) 按需加载列表布局。
两种布局方式在细节上略有差异,但大体流程相同,布局流程如下:
- 上层组件向下层组件传递约束(constraints)条件。
- 下层组件确定自己的大小,然后告诉上层组件。注意下层组件的大小必须符合父组件的约束。
- 上层组件确定下层组件相对于自身的偏移和确定自身的大小(大多数情况下会根据子组件的大小来确定自身的大小)。
比如,父组件传递给子组件的约束是“最大宽高不能超过100,最小宽高为0”,如果我们给子组件设置宽高都为200,则子组件最终的大小是100*100,因为任何时候子组件都必须先遵守父组件的约束,在此基础上再应用子组件约束(相当于父组件的约束和自身的大小求一个交集)。
本节我们主要看一下盒模型布局,然后会在可滚动组件一章中介绍 Sliver 布局模型。盒模型布局组件有两个特点:
- 组件对应的渲染对象都继承自 RenderBox 类。在本书后面文章中如果提到某个组件