Flutter的一些概念(二)

注:本文同步发布于微信公众号:stringwu的互联网杂谈 Flutter的一些概念(二)

1 flutter的核心渲染模块

当应用启动时flutter 会遍历所有的Widget 形成Widget 树,并通过createElement 方法创建每个element 对象,最后通过createRenderObject 方法创建renderobject 对象

1.1 Widget

Widget 树作来描述UI结构,很轻量,

1.2 Element

Element同时持有WidgetRenderObject
会存放一些上下文信息,,支撑UI 结构

1.3 RenderObject

Render 控制实际的布局和绘制,保存元素的大小和布局等信息,实例化一个RenderObject 是非常耗时的。

2 Layer 和SceneBuilder的区别与联系

Flutter中,SceneBuilderLayer都是渲染流程中的关键概念,是紧密相关的,它们一起工作来构建应用程序的UI。当用户操作应用程序时,SceneBuilder会根据用户输入来更新Scene,并生成新的Layer。然后,Flutter将这些Layer传递给GPU或CPU进行渲染,从而生成最终的UI
LayerSceneBuilder 都是渲染流程中的关键概念,它们是构建和渲染 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应用的渲染树,包括所有的LayerSceneBuilder 提供了一系列方法来添加、修改和删除Layer,构建最终的渲染输出。SceneBuilder 的使用通常涉及以下步骤:

  • 创建SceneBuilder 实例:开始构建过程。
  • 添加 Layer:使用 addRectaddPictureaddTexture 等方法添加不同类型的 Layer。
  • 构建Scene:通过调用 build 方法完成 Scene 的构建。
  • 提交渲染:将构建好的 Scene 提交给渲染引擎进行渲染。

首先由 UI 线程构建 Widget 树,然后通过 RendererWidget 树转换成 RenderObject 树,接着 RenderObject 树被转换成 Layer 树。最后,使用 SceneBuilder 构建 Scene,并提交给渲染引擎进行渲染。

3 几个关键字之间的联系

mixin implements extends这三个关键字在Dart中可同时存在,其中
mixin 混入,多个类层次结构中复用类代码的方法,使用mixin的条件

  • mixins类只能继承自object
  • mixins 不能有构造函数
  • implements 实现接口
  • extends 继承

4 widget的分类

  • 绘制类:RenderObjectWidget ,相关的方法调用顺序为:layout -> performResize -> performLayout -> markNeedsPaint
  • 代理类,inheritedWidgetParentDataWidget,一般用 于状态的共享
  • 组合类:StatelesWidgetStatefulWidget

5 参考

Flutter面试题

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

posted @ 2024-08-31 16:11  woodWu  阅读(3)  评论(0编辑  收藏  举报