阅读 61

Flutter UI渲染

flutter的渲染离不开flutter三棵树(Widget、Element、RenderObject)

flutter 三棵树.png

树的关联

他们的依赖关系是:根据Widget树生成Element树,再依赖于Element树生成RenderObject 树

flutter.png

三棵树的作用

简而言之是为了性能,为了复用Element从而减少频繁创建和销毁RenderObject。因为实例化一个RenderObject的成本是很高的,频繁的实例化和销毁RenderObject对性能的影响比较大,所以当Widget树改变的时候,Flutter使用Element树来比较新的Widget树和原来的Widget树

Widget

  • widget是 Flutter 的核心部分,是用户界面的不可变描述信息。Widget的功能是“描述一个UI元素的配置数据”,它就是说,Widget其实并不是表示最终绘制在设备屏幕上的显示元素,而它只是描述显示元素的一个配置数据。

  • widget不只表示 UI 控件,还表示一些功能性的组件,如路由跳转 Navigator,手势检测 GestureDetector 组件等,flutter 一切皆widget。

  • Widget 的 canUpdate 方法通过比较新部件和旧部件的 runtimeType 和 key 属性是否相同来决定更新部件对应的 Element。

Element

Element是实例化的 Widget 对象,通过 Widget 的 createElement() 方法,是在特定位置使用 Widget配置数据生成

  • Element 用于管理应用 UI 的更新和更改,管理部件的生命周期,每个 Element 都包含对 Widget 和 RenderObject 的引用。

  • 当 Widget 变化时,如果两个 Widget 的 runtimeType 和 key 属性相同的,那么新的 Element 会通过 Element.update() 更新旧的 Element,否则旧的 Element 会被删除,新生成的 Element 插入到树中。

  • Flutter中真正代表屏幕上显示元素的类是Element,Widget只是UI元素的一个配置数据,并且一个Widget可以对应多个Element。

RenderObiect

RenderObject:用于应用界面的布局和绘制,保存了元素的大小,布局等信息;

  • 渲染树的任务就是做组件的具体的布局渲染工作,渲染树上每个节点都是一个继承自 RenderObject 类的对象,其由 Element 中的 renderObject 或 RenderObjectWidget 中的 createRenderObject 方法生成,该对象内部提供多个属性及方法来帮助框架层中的组件如何布局渲染

  • 当应用运行时 Flutter 使用 RenderObject 的数据绘制应用界面,最终形成一个 Render Tree,实例化一个 RenderObject 是非常耗能的

区别

Element 与 Widget 另一个区别在于,Widget 天然是不可变的(immutable),它如要更新便需要重建,如果想要把可变状态与 Widget 关联起来,可以使用 StatefulWidget,StatefulWidget 通过使用StatefulWidget.createState 方法创建 State 对象,并将之扩充到 Element 以及合并到树中;

文章分类
前端
文章标签