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

最新推荐文章于 2025-03-26 14:12:42 发布

原创

最新推荐文章于 2025-03-26 14:12:42 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#经验分享

本文详细介绍了Flutter中画面渲染的过程，从Layer的种类、内部机制到Flutter Framework的Layer构成。通过示例代码展示了如何创建和使用Layer，以及如何进行画面更新和复用。文章还探讨了Layer的更新机制，包括markNeedsAddToScene和updateSubtreeNeedsAddToScene方法的作用。最后，讲解了Flutter框架中Scene的构建和渲染流程。

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;
}