绘制原理

相关类

  • Canvas:封装了Flutter Skia各种绘制指令,比如画线、画圆、画矩形等指令。
  • Layer:分为容器类和绘制类两种;暂时可以理解为是绘制产物的载体,比如调用 Canvas 的绘制 API 后,相应的绘制产物被保存在 PictureLayer.picture 对象中。
  • Scene:屏幕上将要要显示的元素。在上屏前,我们需要将Layer中保存的绘制产物关联到 Scene 上。
  • Picture:是一系列的图形绘制操作指令。
Read More

Sliver布局模型

在Flutter中,列表的每个Item被称为Sliver。

Flutter常见的列表类最终都有Scrollable类实现,而该类内部包含RawGestureDetector等一系列负责处理手势、响应滑动的类。

RenderViewport布局流程分析

RenderViewport关键类及其关系

Read More

Widget

Widget

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

@immutable // 不可变
abstract class Widget extends DiagnosticableTree { //DiagnosticableTree提供调试信息
const Widget({ this.key });

final Key? key;//canUpdate中判断前后的key是否相同,则使用新的Widget配置更新Element对象,否则创建新的Element对象

@protected
@factory
Element createElement();//每个Widget都有对应的Element。Widget树根Element树对应


@override
String toStringShort() {
final String type = objectRuntimeType(this, 'Widget');
return key == null ? type : '$type-$key';
}

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.dense;
}

@override
@nonVirtual
bool operator ==(Object other) => super == other;

@override
@nonVirtual
int get hashCode => super.hashCode;


// 是否可以用newWidget修改前一帧oldWidget生成的Element,而不是创建新的Element
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}

}

Widget的特点:

  • 声明式UI,描述UI的层级结构、样式、布局过程
Read More

RenderObject

概念

RenderObject表示渲染树的一个对象,其职责包括:Layout、Paint、Hit Testing。

作用:

  • 布局,从RenderBox开始,对RenderObject Tree从上至下进行布局。
  • 绘制,通过Canvas对象,RenderObject可以绘制自身以及其在RenderObject Tree中的子节点。
Read More