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面试题

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