Flutter 视图树🌲

Flutter 视图树包含了 3 种树：

Widget：
存放渲染内容、视图布局信息，widget 的属性最好都是 immutable（不可变的）

Element：
存放上下文，通过 Element 遍历视图树，Element 同时持有 Widget 和 RenderObject

RenderObject：
根据 Widget 的布局属性进行 「布局（layout）」、「绘制（ paint）」出Widget 传入的内容
下面通过画的图来了解一下：

Widget Element RenderObject

这些类型都是什么意思呢？

组合型

Composer (设计者) 角色，将其他 widget 进行瓶装，组合成一个新的 widget

代理型

数据传递

展示型

具有实际展示内容的视图

那么这三颗树🌲是怎么联系起来，并且创建出来视图呢？

其实这三者是依次创建，并传递的。

首先，创建出 widget 树

然后，调用 runApp(rootWidget)方法，将rootWidget传递给rootElement

然后，通过上一步传递过来的rootWidget，作为rootElement的子节点，生成Element树

最后，由Element树生成Render树。

这样，三棵树都生成好了。