Widget 的渲染原理#

不是所有的 Widget 都会被独立渲染。只有继承 RenderObjectWidget 的才会创建 RenderObject 对象。

在 Flutter 中，有三个树非常重要， Widget树 、 Render树 、 Element树。Flutter引擎是针对 Render树 进行渲染。

Widget树 、 Render树 、 Element树#

• 每一个 Widget 都会创建一个 Elememt 对象

  • 隐式调用 createElement 方法。
    • Element 加入 Element树 中
    • 它会创建三种 Element

• RenderElement 主要是创建 RenderObject 对象

  • 继承 RenderObjectWidget 的 Widget 会创建 RenderElement
  • Flutter 会调用 mount 方法，调用 createRanderObject 方法

• StatefulElement 继承 ComponentElement

  • StatefulWidget 会创建 StatefulElement
  • 调用 createState 创建 State
  • 将 Widget 赋值给 state
  • 调用 state 的 build 方法，并将自己 Element 传出去
    • build 里面的 context 就是 element

• StatelessElement 继承 ComponentElement

  • StatelessWidget 会创建 StatelessElement
  • 主要就是调用 build 方法，并将自己 Element 传出去