# 布局类Widget ## 简介 布局类Widget都会包含一个或多个子widget，不同的布局类Widget对子widget排版(layout)方式不同。我们在前面说过Element树才是最终的绘制树，Element树是通过widget树来创建的（通过`Widget.createElement()`），widget其实就是Element的配置数据。Flutter中，根据Widget是否需要包含子节点将Widget分为了三类，分别对应三种Element，如下表： Widget对应的Element用途LeafRenderObjectWidgetLeafRenderObjectElementWidget树的叶子节点，用于没有子节点的widget，通常基础widget都属于这一类，如Text、Image。SingleChildRenderObjectWidgetSingleChildRenderObjectElement包含一个子Widget，如：ConstrainedBox、DecoratedBox等MultiChildRenderObjectWidgetMultiChildRenderObjectElement包含多个子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）**。 布局类Widget就是指直接或间接继承(包含)MultiChildRenderObjectWidget的Widget，它们一般都会有一个children属性用于接收子Widget。我们看一下继承关系 Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget 。RenderObjectWidget类中定义了创建、更新RenderObject的方法，子类必须实现他们，关于RenderObject我们现在只需要知道它是最终布局、渲染UI界面的对象即可，也就是说，对于布局类Widget来说，其布局算法都是通过对应的RenderObject对象来实现的，所以读者如果对接下来介绍的某个布局类Widget原理感兴趣，可以查看其RenderObject的实现，而在本章中，为了让读者对布局类Widget有个快速的认识，所以我们不会深入到RenderObject的细节中区。在学习本章时，读者的重点是掌握不同布局类Widget的布局特点，具体原理和细节我们会在后面高级部分介绍。