初略讲解Flutter的布局类组件

544 阅读2分钟

布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(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是直接继承自StatelessWidgetStatefulWidget,然后在build()方法中构建真正的RenderObjectWidget,如Text,它其实是继承自StatelessWidget,然后在build()方法中通过RichText来构建其子树,而RichText才是继承自LeafRenderObjectWidget。不过为了方便叙述,我们也可以直接说Text属于LeafRenderObjectWidget(其它Widget也可以这么描述)。读到这里我们会发现,其实StatelessWidgetStatefulWidget就是用于组合Widget的基类,它们本身并不关联最终的渲染对象(RenderObjectWidget

布局类组件都是直接或间接继承(包含)MultiChildRenderObjectWidget,它们一般都会有一个children属性用于接收子Widget。继承关系是:Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget。

RenderObjectWidget类中定义了createRenderObject()updateRenderObject()(创建、更新RenderObject)的方法,子类必须实现它们,关于RenderObject我们现在只需要知道它是最终布局、渲染UI界面的对象即可,也就是说,对于布局类组件来说,其布局算法都是通过对应的RenderObject对象来实现的,所以读者如果对接下来介绍的某个布局类组件的原理感兴趣,可以查看其对应的RenderObject的实现,比如Stack(层叠布局)对应的RenderObject对象就是RenderStack,而层叠布局的实现就在RenderStack中。