前言

  在flutter中有三棵树：Widget树和Element树、RenderObject树，当程序启动时，flutter会遍历并创建所有的Wdiget形成WidgetTree，类似于html中的DOM“树”结构，这个概念跟Flutter中的结构相似。

  通过上图可得知在flutter中，每个控件形成的树结构都包含了一些关联，如Text组件是Column的子组件，Scaffold是Center的父组件，这样的层级关系使得每一个控件都清晰的关联到了一起，由此形成了树结构。

Widget

  在flutter中Widget代表有Text、Container、等等，可以接列为Widget树，他就表示了我们在dart中所写控件的结构。Widget是UI界面的体现，表示了Element的配置信息，Flutter的界面是从各式各样的Widget声明组成的，通过源码可知Widget是不可变的，意味着跟它有继承或者声明的变量等都要为Final类型的。

@immutable
abstract class Widget extends DiagnosticableTree {/// ...}

Element

  Element代表着元素树，简而言之它控制着Widget在具体位置的实例化，负责着Widget的生命周期，持有这widget实例和renderObject实例，和Widget继承同一个类。

 通过官方手册可知Element有两种基本类型：

   1：ComponentElement，其他elements的宿主，它本身不包含RenderObject，而由它持有的element节点包含，像StatelessWidget 和StatefulWidget 中分别创建的StatelessElement和StatefulElement都是继承自ComponentElement。

   2：RenderObjectElement，参与layout或者绘制阶段的元素。

RenderObject

  renderObject代表渲染树中的每个节点，基类是renderObject 它定义了布局渲染和绘制的抽象模型。每一个renderObject中有parent，和一个parentData，在父级中可以储存child的具体数据，如child的大小或位置信息等等。

小结

   在Flutter中的三棵树，Element在其中相当于桥梁的作用，Widget可以理解为储存布局信息，创建后不可变与element是一对多的关系，每当Widget发生变动时，element也会跟着变化，因此渲染实际的真实节点，renderObject也会发生改变。

                                                      词不达意