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