布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同。我们在前面说过Element
树才是最终的绘制树,Element
树是通过Widget
树来创建的(通过Widget.createElement()
),同时Widget
就是Element
的配置数据。在Flutter中,根据Widget
是否需要包含子节点将Widget
分为了三类,同时分别对应三种Element
,如下表:
Widget | 对应的Element | 用途 |
---|---|---|
LeafRenderObjectWidget | LeafRenderObjectElement | Widget树的叶子节点,用于没有子节点的Widget,通常基础组件都属于这一类,如Text、Image。 |
SingleChildRenderObjectWidget | SingleChildRenderObjectElement | 包含一个子Widget,如:ConstrainedBox、DecoratedBox等。 |
MultiChildRenderObjectWidget | MultiChildRenderObjectElement | 包含多个子Widget,一般都有一个children参数,接收一个Widget数组,如Row、Column、Stack等。 |
注意:Flutter中的很多Widget是直接继承自
StatelessWidget
或StatefulWidget
,然后在build()
方法中构建真正的RenderObjectWidget
,如Text
,它其实是继承自StatelessWidget
,然后在build()
方法中通过RichText
来构建其子树,而RichText
才是继承自LeafRenderObjectWidget
。不过为了方便叙述,我们也可以直接说Text
属于LeafRenderObjectWidget
(其它Widget也可以这么描述)。读到这里我们会发现,其实StatelessWidget
和StatefulWidget
就是用于组合Widget的基类,它们本身并不关联最终的渲染对象(RenderObjectWidget
)
布局类组件都是直接或间接继承(包含)MultiChildRenderObjectWidget
,它们一般都会有一个children
属性用于接收子Widget。继承关系是:Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget。
RenderObjectWidget
类中定义了createRenderObject()
、updateRenderObject()
(创建、更新RenderObject
)的方法,子类必须实现它们,关于RenderObject
我们现在只需要知道它是最终布局、渲染UI界面的对象即可,也就是说,对于布局类组件来说,其布局算法都是通过对应的RenderObject
对象来实现的,所以读者如果对接下来介绍的某个布局类组件的原理感兴趣,可以查看其对应的RenderObject
的实现,比如Stack
(层叠布局)对应的RenderObject
对象就是RenderStack
,而层叠布局的实现就在RenderStack
中。