UI系统会进行界面的图层划分,可以进行图层复用,减少绘制量,提升绘制性能。而RepaintBoundary是开放给开发者使用的独立图层。
RenderObject有一个isRepaintBoundary属性,该属性决定这个RenderObject重绘时是否独立于其父元素,如果该属性为true,则独立绘制。
如何独立绘制呢?
1 |
|
UI系统会进行界面的图层划分,可以进行图层复用,减少绘制量,提升绘制性能。而RepaintBoundary是开放给开发者使用的独立图层。
RenderObject有一个isRepaintBoundary属性,该属性决定这个RenderObject重绘时是否独立于其父元素,如果该属性为true,则独立绘制。
如何独立绘制呢?
1 |
|
经过Build流程,Render Tree中绘制相关的基础信息已经完成更新;经过Layout流程,Render Tree中每个节点的大小和位置完成计算与存储,接下来进入Paint流程:基于Layout的信息生成绘制指令。
Render Tree和Layer Tree的对应关系
使用Layer Tree的好处是可以做Paint流程的局部更新。Render Tree中,每个RenderObject对象都拥有一个needsCompositing属性,用于判断自身及子节点是否有一个要去合成的图层,同是还有一个_needsCompositingBitsUpdate字段
用于标记该属性是否需要更新。Flutter在Paint开始前首先会完成needsCompositing属性的更新,然后开始正式绘制。
1
2
3
4
5
6
7
8
9
10
11
12
13class RenderBinding {
void drawFrame() {
pipelineOwner.flushLayout();//布局
pipelineOwner.flushCompositingBits();//更新所有节点,计算待绘制区域数据
pipelineOwner.flushPaint();//绘制
if (sendFramesToEngine) {
renderView.compositeFrame(); // 发送数据到GPU线程
pipelineOwner.flushSemantics(); // 更新语义化
_firstFrameSent = true;
}
}
}
markNeedsLayout方法会将当前节点标记为需要Layout。markNeedsLayout方法在很多地方都会被触发,比如UI的高宽发生变化,字体属性发生变化等。
1 | class RenderObject { |