Links

22.Widget树&Render树&Element树

Widget 的渲染原理

不是所有的 Widget 都会被独立渲染。只有继承 RenderObjectWidget 的才会创建 RenderObject 对象。
Flutter 中,有三个树非常重要, Widget树Render树Element树Flutter引擎是针对 Render树 进行渲染。

Widget树 、 Render树 、 Element树

  • 每一个 Widget 都会创建一个 Elememt 对象
    • 隐式调用 createElement 方法。
      • Element 加入 Element树
      • 它会创建三种 Element
  • RenderElement 主要是创建 RenderObject 对象
    • 继承 RenderObjectWidgetWidget 会创建 RenderElement
    • Flutter 会调用 mount 方法,调用 createRanderObject 方法
  • StatefulElement 继承 ComponentElement
    • StatefulWidget 会创建 StatefulElement
    • 调用 createState 创建 State
    • Widget 赋值给 state
    • 调用 statebuild 方法,并将自己 Element 传出去
      • build 里面的 context 就是 element
  • StatelessElement 继承 ComponentElement
    • StatelessWidget 会创建 StatelessElement
    • 主要就是调用 build 方法,并将自己 Element 传出去