Flutter的一些概念(二)

注：本文同步发布于微信公众号：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 参考

Flutter面试题

公众号二维码，有兴趣的小伙伴可以关注一下