Loading

Flutter 布局类组件:简介

前言

布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同。
我们知道,Element树才是最终的绘制树,Element树是通过Widget树来创建的(通过Widget.createElement()),Widget其实就是Element的配置数据。
故而,根据Widget是否需要包含子节点可将Widget分为三类,并对应三种Element,如下表:

Widget 对应的Element 用途
LeafRenderObjectWidget LeafRenderObjectElement Widget树的叶子节点,用于没有子节点的widget,通常基础组件都属于这一类,如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才是继承自MultiChildRenderObjectWidget。即可以说,ext属于MultiChildRenderObjectWidget(其它widget也可以这么描述),这才是本质。其实StatelessWidget和StatefulWidget就是两个用于组合Widget的基类,它们本身并不关联最终的渲染对象(RenderObjectWidget)。
布局类组件就是指直接或间接继承(包含)MultiChildRenderObjectWidget的Widget,它们一般都会有一个children属性用于接收子Widget。于是可得继承关系:

Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget

posted @ 2019-12-19 17:07  Parzulpan  阅读(336)  评论(0编辑  收藏  举报