Flutter完整开发实战详解(二十一、 Flutter 画面渲染的全面解析)

void main() {
ui.window.onBeginFrame = beginFrame;

ui.window.scheduleFrame();
}

void beginFrame(Duration timeStamp) {
final double devicePixelRatio = ui.window.devicePixelRatio;

///创建一个画板
final ui.PictureRecorder recorder = ui.PictureRecorder();

///基于画板创建一个 Canvas
final ui.Canvas canvas = ui.Canvas(recorder);
canvas.scale(devicePixelRatio, devicePixelRatio);

var centerX = ui.window.physicalSize.width / 2.0;
var centerY = ui.window.physicalSize.height / 2.0;

///画一个 100 的剧中蓝色
canvas.drawRect(Rect.fromCenter(center: Offset.zero, width: 100, height: 100),
new Paint()…color = Colors.blue);

final ui.SceneBuilder sceneBuilder = ui.SceneBuilder();

OffsetLayer rootLayer = new OffsetLayer();

OffsetLayer offsetLayer = new OffsetLayer(offset: Offset(centerX, centerY));
rootLayer.append(offsetLayer);

PictureLayer pictureLayer = new PictureLayer(Rect.zero);
pictureLayer.picture = recorder.endRecording();
offsetLayer.append(pictureLayer);

rootLayer.addToScene(sceneBuilder);

ui.window.render(sceneBuilder.build());
}

四、Layer 的品种

这里额外介绍下 Flutter 中常见的 Layer，如下图所示，一般 Flutter 中 Layer 可以分为 ContainerLayer 和非 ContainerLayer 。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PmCe8ggN-1651125755202)(https://user-gold-cdn.xitu.io/2020/3/26/171175c5f6da83dc?imageView2/0/w/1280/h/960/ignore-error/1)]

ContainerLayer 是可以具备子节点，也就是带有 append 方法，大致可以分为：

• 位移类（OffsetLayer/TransformLayer）;
• 透明类（OpacityLayer）
• 裁剪类（ClipRectLayer/ClipRRectLayer/ClipPathLayer);
• 阴影类 (PhysicalModelLayer)

为什么这些 Layer 需要是 ContainerLayer ？因为这些 Layer 都是一些像素合成的操作，其本身是不具备“描绘”控件的能力，就如前面的蓝色小方块例子一样，如果要呈现画面一般需要和 PictureLayer 结合。

比如 ClipRRect 控件的 RenderClipRRect 内部，在 pushClipRRect 时可以会创建 ClipRRectLayer ，而新创建的 ClipRRectLayer 会通过 appendLayer 方法触发 append 操作添加为父 Layer 的子节点。

而非 ContainerLayer 一般不具备子节点，比如:

• PictureLayer 是用于绘制画面，Flutter 上的控件基本是绘制在这上面；
• TextureLayer 是用于外界纹理，比如视频播放或者摄像头数据；
• PlatformViewLayer 是用于 iOS 上 PlatformView 相关嵌入纹理的使用；

举个例子，控件绘制时的 Canvas 来源于 PaintingContext ， 而如下代码所示 PaintingContext 通过 _repaintCompositedChild 执行绘制后得到的 Picture 最后就是提交给所在的 PictureLayer.picture。

void stopRecordingIfNeeded() {
if (!_isRecording)
return;
_currentLayer.picture = _recorder.endRecording();
_currentLayer = null;
_recorder = null;
_canvas = null;
}

五、Layer 的内外兼修

了解完 Layer 是如何提交绘制后，接下来介绍的就是 Layer 的刷新和复用。

我们知道当 RenderObject 的 isRepaintBoundary 为 ture 时，Flutter Framework 就会自动创建一个 OffsetLayer 来“承载”这片区域，而 Layer 内部的画面更新一般不会影响到其他 Layer 。

那