初识Flutter中的Layer

开篇

接触Flutter开发一段时间后发现自己对Flutter渲染流程重要的一环Layer的认知比较少,虽然Flutter对Widget的封装非常全面了开发者基本上只要面向Widget编程就可以完成绝大部分的功能，但是它作为一个UI框架我们还是需要尽可能的掌握它渲染体系的来龙去脉，因此借此篇文章简单介绍笔者对Layer的探索。

Flutter渲染流程简介

参与UI的构建和显示涉及到两个线程分别是界面线程(UI Thread)和光栅线程(GPU Thread)，UI线程做构建流水线工作(开发者编写的代码), 光栅线程做UI绘制工作(图形库 Skia 在此线程上运行)。

1,GPU每隔一定的时间发出一个Vsycn信号这个时间由屏幕的刷新率决定，以60HZ的刷新率为例那么它的时间间隔就是1000/60 = 16.7 ms一次。

2,UI线程收到Vsycn信号后就会做UI的构建工作(需要在16.7ms内完成否则出现丢帧)，然后发送到光栅线程GPU线程

3,GPU Thread收到UI Thread发来的UI数据后就会通过Skia去上屏渲染

上图摘自Flutter官网介绍，从上图可以看到有个Layer Tree这也是本文探索的目标。

Flutter中的三棵树

Flutter的开发更像是面向Widget编程，Widget内部又封装了Element以及RenderObject 那么我们先从Flutter中的三棵树说起

Widget 组件树
Element 逻辑树
RenderObject 渲染树

main(){runApp(MaterialApp(home: Row(mainAxisAlignment: MainAxisAlignment.center,children: [MyWidget(),MyWidget()],),));
}
class MyWidget extends StatelessWidget{@overrideWidget build(BuildContext context) {return Container(height: 100,width: 200,child: Text('MyWidget',style: TextStyle(fontSize: 25),),);}
}

上述代码中Widget , Element , RenderObject三棵树的对应关系

从上图可以看出Widget和Element的数量是一一对应的，而RenderObject不是。查看framework.dart源码后可以发现只有RenderObjectWidget的派生类才会有RenderObject，其他的Widget都不具备渲染能力。

RenderObject绘制

当Flutter收到Vsycn的时候就会做UI的构建工作，最终会调用RendererBinding的drawFrame()

@protected
void drawFrame() {assert(renderView != null);//1，布局逻辑，确定大小pipelineOwner.flushLayout();pipelineOwner.flushCompositingBits();//2，绘制逻辑，拿到SkCanvas绘制到layer上。具体逻辑见RenderObject中的paint方法pipelineOwner.flushPaint();if (sendFramesToEngine) {renderView.compositeFrame(); // this sends the bits to the GPUpipelineOwner.flushSemantics(); // this also sends the semantics to the OS._firstFrameSent = true;}
}

renderView.compositeFrame()最终生成UI数据发送到GPU实现渲染，RenderView是Flutter中根部的RenderObject。compositeFrame的核心代码如下:

void compositeFrame() {//创建SceneBuilder，获取到引擎层的句柄final ui.SceneBuilder builder = ui.SceneBuilder();//Scene 最最终是通过SceneBuilder生成的，也是引擎层的句柄，此处的layer就是根部的layer，它会合成所有的layerfinal ui.Scene scene = layer!.buildScene(builder);//发送Scene到引擎_window.render(scene);scene.dispose();
}

在上述代码中可以找到layer的身影, layer!.buildScene(builder)就是做Layer Tree的合成。此处的layer是一个TransformLayer是ContainerLayer的子类。

Layer

什么是layer？

在绘制过程中渲染树RenderObject Tree将生成一个图层树Layer Tree，Layer Tree合成后发送到引擎渲染上屏。大多数Layer的特性都可以更改，并且可以将图层移动到不同的父层，且Layer树不会保持其自身的脏状态。要合成树先要在根部的Layer创建SceneBuilder对象，并调用Layer中的addToScene方法添加到SceneBuilder上(Flutter中默认根部的layer是一个TransformLayer)。

Layer的分类

layer分为五大类：

PictureLayer 图像绘制如:Text ,Image
TextureLayer 外接纹理如: 视频播放
PlatformViewLayer Flutter嵌套Native View
PerformanceOverlayLayer 性能监控相关，能够显示出GPU对当前帧光栅化的耗时以及帧渲染的耗时
ContainerLayer 复合层相当于一个根节点可以合成多个叶子节点的layer ，TransformLayer属于ContainerLayer的派生类

接下来用几个示例来了解Flutter常见的Layer

PictureLayer

PictureLayer是Flutter中最常使用到的layer，先看看它的类结构

class PictureLayer extends Layer {//省略无关代码ui.Picture? _picture;@overridevoid addToScene(ui.SceneBuilder builder, [ Offset layerOffset = Offset.zero ]) {assert(picture != null);builder.addPicture(layerOffset, picture!, isComplexHint: isComplexHint, willChangeHint: willChangeHint);}}

PictureLayer中有一个成员属性Picture, Picture是Engine层绘制图像重要的一个环节，可以参考Flutter官方的示例：[https://github.com/flutter/flutter/blob/449f4a6673f6d89609b078eb2b595dee62fd1c79/examples/layers/raw/canvas.dart]

按照官方的示例我们精简一下代码流程：

 final recorder = ui.PictureRecorder();///基于画板创建的画布final canvas = Canvas(recorder, cullRect);///缩放因子final ratio = ui.window.devicePixelRatio;///设置缩放比canvas.scale(ratio, ratio);canvas.drawRect(Rect.fromLTRB(0, 0, 200, 200), Paint()..color = Colors.blue);///录制结束，生成一个PicturePicture picture = recorder.endRecording();SceneBuilder sceneBuilder = ui.SceneBuilder();//对应PictureLayer中的addToScene方法sceneBuilder.addPicture(Offset(0, 0), picture);sceneBuilder.pop();///生成scenefinal scene = sceneBuilder.build();//通知引擎在合适的时机渲染ui.window.render(scene);scene.dispose();

上面的代码就可以渲染出一个图层

小结: 脱离Widget后我们也可以直接使用framework的api渲染出图像

认识RenderObject的绘制流程

在了解到Flutter的绘制流程后我们再来看RenderObject的绘制流程

1,PipelineOwner.flushPaint()调用之后就会遍历需要绘制的RenderObject，RenderObject中的绘制逻辑都在paint方法中

void paint(PaintingContext context, Offset offset) { //通过重写paint决定绘制逻辑
}

2,这里的PaintingContext内部封装了Canvas，除此之外还会创建出一个PictureLayer，PaintingContext的构造函数需要传一个ContainerLayer进去，然后ContainerLayer把创建的Picturelayer append到ContainerLayer上，最终rootlayer会遍历调用layer的addToScene(builder)方法

PaintingContext的构造方法

PaintingContext(this._containerLayer, this.estimatedBounds)

3,把当前的PictureLayer append到_containerLayer上

  void _startRecording() {assert(!_isRecording);_currentLayer = PictureLayer(estimatedBounds);_recorder = ui.PictureRecorder();_canvas = Canvas(_recorder!);_containerLayer.append(_currentLayer!);}

上述流程可以用如下代码简单替换，下面的代码可以绘制出一个PictureLayer的图像

   PaintingContext context = PaintingContext(rootLayer,Rect.fromLTRB(0, 0, 1000, 1000));//模拟paint方法context.canvas.drawRect(Rect.fromLTRB(200, 200, 800, 800), Paint()..color = Colors.blue);context.stopRecordingIfNeeded();final SceneBuilder builder = ui.SceneBuilder();final Scene scene = rootLayer.buildScene(builder);ui.window.render(scene);scene.dispose();

接下来绘制多个PictureLayer的图像，每一帧只绘制了一个颜色的Rect在PictureLayer上，通过合成Layer达到一帧显示多个Rect。

main() async {ui.window.onBeginFrame = beginFrame;ui.window.onDrawFrame = draw1stFrame;///画第一帧ui.window.scheduleFrame();///画第二帧，await Future.delayed(Duration(milliseconds: 500),(){ui.window.onDrawFrame = draw2ndFrame;ui.window.scheduleFrame();});///画第三帧await Future.delayed(Duration(milliseconds: 500),(){ui.window.onDrawFrame = draw3rdFrame;ui.window.scheduleFrame();});///画第四帧await Future.delayed(Duration(milliseconds: 500),(){ui.window.onDrawFrame = draw4thFrame;ui.window.scheduleFrame();});}void beginFrame(Duration duration) {}OffsetLayer rootLayer = OffsetLayer();
void draw1stFrame(){print('draw1stFrame');PaintingContext context = PaintingContext(rootLayer,Rect.fromLTRB(0, 0, 1000, 1000));context.canvas.drawRect(Rect.fromLTRB(200, 200, 800, 800), Paint()..color = Colors.blue);context.stopRecordingIfNeeded();final SceneBuilder builder = ui.SceneBuilder();final Scene scene = rootLayer.buildScene(builder);ui.window.render(scene);scene.dispose();}void draw2ndFrame(){print('draw2ndFrame');PaintingContext context = PaintingContext(rootLayer,Rect.fromLTRB(0, 0, 1000, 1000));context.canvas.drawRect(Rect.fromLTRB(400, 400, 1000, 1000), Paint()..color = Colors.red);context.stopRecordingIfNeeded();final SceneBuilder builder = ui.SceneBuilder();final Scene scene = rootLayer.buildScene(builder);ui.window.render(scene);scene.dispose();}void draw3rdFrame(){print('draw3rdFrame');PaintingContext context = PaintingContext(rootLayer,Rect.fromLTRB(0, 0, 1200, 1200));context.canvas.drawRect(Rect.fromLTRB(600, 600, 1200, 1200), Paint()..color = Colors.yellow);context.stopRecordingIfNeeded();final SceneBuilder builder = ui.SceneBuilder();final Scene scene = rootLayer.buildScene(builder);ui.window.render(scene);scene.dispose();}void draw4thFrame(){print('draw4thFrame');PaintingContext context = PaintingContext(rootLayer,Rect.fromLTRB(0, 0, 1000, 2000));context.canvas.drawRect(Rect.fromLTRB(200, 800, 800, 1400), Paint()..color = Colors.deepPurpleAccent);context.stopRecordingIfNeeded();final SceneBuilder builder = ui.SceneBuilder();final Scene scene = rootLayer.buildScene(builder);ui.window.render(scene);scene.dispose();}

多个PictureLayer效果图:

以上四个色块代表都有自己的PictureLayer，然后append到根部的rootLayer上合成一帧数据。

Layer和SceneBuilder的联系

每一个Layer都对应着SceneBuilder一个api操作，PictureLayer对应的是SceneBuilder.addPicture方法(可以查看具体Layer中addToScene方法)，除了PictureLayer还有类型的Layer,下面就简单介绍几种

1,TextureLayer 外接纹理图层

SceneBuilder.addTexture

2,ClipPathLayer 剪裁图层 —> 剪裁子图层

SceneBuilder.pushClipPath

注意:图层对的剪裁是比较消耗性能的,尽可能避免使用

3,ColorFilterLayer 滤色器图层 —> 滤色子图层

SceneBuilder.pushColorFilter

其中pushColorFilter和pushClipPath这类的方法会得到一个EngineLayer，EngineLayer是dart层持有Engine层的一个引用，其他还有很多图层操作的API这里就不一一举例了。

RenderObject和Layer的联系

通过上面的示例，我们了解到RenderObject最终的绘制都是在Layer上的，它是通过PaintingContext和Layer关联上的

在Renderobject中有个isRepaintBoundary的方法，默认返回值是false，当它的返回值是true的时候就不会使用父节点的PaintingContext，而是重新创建一个PaintingContext来绘制。PaintingContext中会创建一个新的Picturelayer

RenderObject使用独立的Layer

在RenderObject中有一个isRepaintBoundary的方法，通过重写isRepaintBoundary方法的返回值为true时可以做指定当前RenderObject节点使用独立的PictureLayer进行渲染。

  @overridebool get isRepaintBoundary => super.isRepaintBoundary;

代码逻辑如下:

PaintingContext.paintChild

  void paintChild(RenderObject child, Offset offset) {//child isRepaintBoundary = true 就会if (child.isRepaintBoundary) {stopRecordingIfNeeded();//合成_compositeChild(child, offset);} else {child._paintWithContext(this, offset);}assert(() {if (debugProfilePaintsEnabled)Timeline.finishSync();return true;}());}

PaintingContext._compositeChild

  void _compositeChild(RenderObject child, Offset offset) {// Create a layer for our child, and paint the child into it.if (child._needsPaint) {repaintCompositedChild(child, debugAlsoPaintedParent: true);} else {}final OffsetLayer childOffsetLayer = child._layer! as OffsetLayer;childOffsetLayer.offset = offset;appendLayer(child._layer!);}

PaintingContext.repaintCompositedChild —> PaintingContext._repaintCompositedChild

  static void _repaintCompositedChild(RenderObject child, {bool debugAlsoPaintedParent = false,PaintingContext? childContext,}) {OffsetLayer? childLayer = child._layer as OffsetLayer?;if (childLayer == null) {child._layer = childLayer = OffsetLayer();} else {childLayer.removeAllChildren();}//创建新的PaintingContextchildContext ??= PaintingContext(child._layer!, child.paintBounds);//绘制childchild._paintWithContext(childContext, Offset.zero);childContext.stopRecordingIfNeeded();}

验证RenderObject使用独立的Layer

通过自定义一个RandomColorRenderObject，重写isRepaintBoundary的返回值，分别返回true和false。点击文字会发现返回false的时候RandomColorRenderObject的piant会被调用，而返回true的时候RandomColorRenderObject的piant不会会被调用。

void main() {runApp(MaterialApp(home: Column(mainAxisSize: MainAxisSize.min,crossAxisAlignment: CrossAxisAlignment.start,children: [Container(child:RandomColorWidget(),),MyText(),],),));
}class MyText extends StatefulWidget {@overrideState<StatefulWidget> createState() {return MyTextState();}
}class MyTextState extends State {String text = _text();@overrideWidget build(BuildContext context) {return Container(height: 100,width: 300,child: GestureDetector(child: Text(text),onTap: () {setState(() {text = _text();});},),);}
}String _text() {return "12345678${Random().nextInt(10)}";
}class RandomColorWidget extends RenderObjectWidget {@overrideRenderObject createRenderObject(BuildContext context) {return RandomColorRenderObject(context);}@overrideRandomColorElement createElement() {return RandomColorElement(this);}
}class RandomColorElement extends RenderObjectElement {RandomColorElement(RenderObjectWidget widget) : super(widget);
}class RandomColorRenderObject extends RenderBox {RandomColorRenderObject(BuildContext context);ViewConfiguration createViewConfiguration() {final double devicePixelRatio = window.devicePixelRatio;return ViewConfiguration(size: window.physicalSize / devicePixelRatio,devicePixelRatio: devicePixelRatio,);}@overrideRect get paintBounds {return Rect.fromLTRB(0,0,200 ,200 );}@overridevoid performLayout() {size = paintBounds.size;// print('RandomColorRenderObject performLayout');}@overridebool get isRepaintBoundary => true;@overridevoid paint(PaintingContext context, Offset offset) {super.paint(context, offset);context.canvas.save();///画Rectcontext.canvas.drawRect(Rect.fromLTWH(0, 0, 200, 200), Paint()..color = _randomColor());context.canvas.restore();}@overrideRect get semanticBounds => paintBounds;
}Color _randomColor(){return Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255), Random().nextInt(255));
}

优势 : 当某个Layer的绘制很消耗性能又不会频繁的刷新，在不影响其他Layer的前提下可以通过复用提升性能。这样其它的RenderObject在刷新重绘的时候这个Layer不会被重绘

Layer Tree和RenderObject Tree的对应关系

总结

通过此次探索希望能帮助大家加深对Layer的认知, 简而言之 RenderObject只负责绘制逻辑而 Layer才是最终输出到Skia的产物。不同的Layer对应着SceneBuilder中图层操作不同的Api, 因篇幅有限此次就不表述其它Layer的效果及作用了, 有兴趣的同学可以自行参照SceneBuilder的源码去研究。

参考Flutter官方文档