Flutter - Widget渲染流程

发表于 本文字数： 250 阅读时长 ≈ 1 分钟

源码分析Widget渲染原理

并不是所有的Widget都会被独立渲染!
只有继承RenderObjectWidget的才会创建RenderObject对象!
在Flutter渲染的流程中，有三颗重要的树!Flutter引擎是针对Render树进行渲染!

每一个Widget都会创建一个Element对象。
隐式调用createElement方法，Element加入Element树中。

它会创建三种Element

  • RenderElement主要是创建RenderObject对象
    继承RenderObjectWidget的Widget会创建RenderElement
    • 创建RanderElement
    • Flutter会凋用mount方法，调用createRanderObject方法
  • StatefulElement继承ComponentElement
    StatefulWidget会创建StatefulElement
    • 调用createState方法, 创建State
    • 将Widget赋值给state
    • 凋用state的build方法并且將自己(Element)传出去
    • build里面的context 就是Widget的Element!
  • StatelessElement继承ComponentElement
    StatelessWidget 会创建StatelessElement
    • 主要就是调用build方法并且将自己(Element) 传出去.

Q: Render树用于渲染，Widget用于定义开发。那么Element有什么意义？
A: Element持有Widget，同时也持有RenderObject。拿到context就可以更方便做事。