注:本文同步发布于微信公众号:stringwu的互联网杂谈 Flutter的一些概念(二)
1 flutter的核心渲染模块
当应用启动时flutter 会遍历所有的Widget
形成Widget
树,并通过createElement
方法创建每个element 对象,最后通过createRenderObject
方法创建renderobject
对象
1.1 Widget
Widget 树作来描述UI结构,很轻量,
1.2 Element
Element
同时持有Widget
和RenderObject
会存放一些上下文信息,,支撑UI 结构
1.3 RenderObject
Render
控制实际的布局和绘制,保存元素的大小和布局等信息,实例化一个RenderObject
是非常耗时的。
2 Layer 和SceneBuilder的区别与联系
在Flutter
中,SceneBuilder
和Layer
都是渲染流程中的关键概念,是紧密相关的,它们一起工作来构建应用程序的UI。当用户操作应用程序时,SceneBuilder
会根据用户输入来更新Scene
,并生成新的Layer
。然后,Flutter
将这些Layer
传递给GPU或CPU进行渲染,从而生成最终的UI
Layer
和 SceneBuilder
都是渲染流程中的关键概念,它们是构建和渲染 UI 的一部分;
2.1 Layer
Layer
树是渲染树的一部分,但它与 Widget
树不同,因为 Layer
树是专门用于渲染的。 Layer
是一个抽象类,代表了屏幕上的一块区域。在 Flutter
的渲染流程中,Widget
首先被转换成 Element
,然后 Element
被转换成 RenderObject
,最终 RenderObject
被转换成 Layer
。
Flutter 中有几种不同类型的 Layer,包括但不限于:
- ContainerLayer:一个简单的层,没有任何视觉内容,但可以包含其他层。
- PictureLayer:包含 Skia 图形引擎的 Picture 对象,用于绘制图形。
- OpacityLayer:可以设置子层的透明度。
- TransformLayer:可以对子层进行变换操作,如旋转、缩放、平移等。
- ClipRectLayer、ClipRRectLayer 和 ClipPathLayer:用于裁剪子层,只显示特定形状内的区域。
2.2 SceneBuilder
SceneBuilder
是一个在构建阶段用来构建 Scene
对象的工具类。Scene
对象代表了整个 Flutter
应用的渲染树,包括所有的Layer
。SceneBuilder
提供了一系列方法来添加、修改和删除Layer
,构建最终的渲染输出。SceneBuilder
的使用通常涉及以下步骤:
- 创建
SceneBuilder
实例:开始构建过程。 - 添加
Layer
:使用addRect
、addPicture
、addTexture
等方法添加不同类型的 Layer。 - 构建
Scene
:通过调用 build 方法完成 Scene 的构建。 - 提交渲染:将构建好的 Scene 提交给渲染引擎进行渲染。
首先由 UI
线程构建 Widget
树,然后通过 Renderer
将 Widget
树转换成 RenderObject
树,接着 RenderObject
树被转换成 Layer
树。最后,使用 SceneBuilder
构建 Scene
,并提交给渲染引擎进行渲染。
3 几个关键字之间的联系
mixin
implements
extends
这三个关键字在Dart
中可同时存在,其中
mixin
混入,多个类层次结构中复用类代码的方法,使用mixin
的条件
- mixins类只能继承自object
- mixins 不能有构造函数
- implements 实现接口
- extends 继承
4 widget的分类
- 绘制类:
RenderObjectWidget
,相关的方法调用顺序为:layout -> performResize -> performLayout -> markNeedsPaint - 代理类,
inheritedWidget
和ParentDataWidget
,一般用 于状态的共享 - 组合类:
StatelesWidget
和StatefulWidget
5 参考
公众号二维码,有兴趣的小伙伴可以关注一下