百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

初识Flutter中的Layer（flutterdemo）

bigegpt 2025-03-14 15:06 9 浏览

开篇

接触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{
  @override
  Widget 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 GPU
    pipelineOwner.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，它会合成所有的layer
    final 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;

  @override
  void 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);

  ///录制结束，生成一个Picture
  Picture picture = recorder.endRecording();
  
  SceneBuilder sceneBuilder = ui.SceneBuilder();
  //对应PictureLayer中的addToScene方法
  sceneBuilder.addPicture(Offset(0, 0), picture);
  
  sceneBuilder.pop();
  ///生成scene
  final 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进行渲染。

  @override
  bool 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();
    }
  
    //创建新的PaintingContext
    childContext ??= PaintingContext(child._layer!, child.paintBounds);
    //绘制child
    child._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 {
  @override
  State createState() {
    return MyTextState();
  }
}

class MyTextState extends State {
  String text = _text();

  @override
  Widget 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 {
  @override
  RenderObject createRenderObject(BuildContext context) {
    return RandomColorRenderObject(context);
  }
  @override
  RandomColorElement 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,
    );
  }

  @override
  Rect get paintBounds {
    return Rect.fromLTRB(
        0,
        0,
        200 ,
        200 );
  }

  @override
  void performLayout() {
    size = paintBounds.size;
   // print('RandomColorRenderObject performLayout');
  }

  @override
  bool get isRepaintBoundary => true;

  @override
  void paint(PaintingContext context, Offset offset) {
    super.paint(context, offset);
    context.canvas.save();
    ///画Rect
    context.canvas.drawRect(
        Rect.fromLTWH(0, 0, 200, 200), Paint()..color = _randomColor());
    context.canvas.restore();
  }

  @override
  Rect 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官方文档【
https://docs.flutter.dev/perf/rendering】

相关推荐

程序员请收好:10个非常有用的 Visual Studio Code 插件

一个插件列表，可以让你的程序员生活变得轻松许多。作者|Daan译者|Elle出品|CSDN（ID：CSDNnews）以下为译文：无论你是经验丰富的开发人员还是刚刚开始第一份工作的初级开发人...

PADS在WIN10系统中菜单显示不全的解决方法

决定由AD转PADS，打开发现菜单显示不正常，如下图所示：这个是由于系统的默认字体不合适导致，修改一下系统默认字体即可，修改方法如下：打开开始菜单-->所有程序-->Windows系统--...

一文讲解Web前端开发基础环境配置

先从基本的HTML语言开始学习。一个网页的所有内容都是基于HTML，为了学好HTML，不使用任何集成工具，而用一个文本编辑器，直接从最简单的HTML开始编写HTML。先在网上下载notepad++文...

TCP/IP协议栈在Linux内核中的运行时序分析

本文主要是讲解TCP/IP协议栈在Linux内核中的运行时序，文章较长，里面有配套的视频讲解，建议收藏观看。1Linux概述　　1.1Linux操作系统架构简介Linux操作系统总体上由Linux...

从 Angular Route 中提前获取数据

#头条创作挑战赛#介绍提前获取意味着在数据呈现在屏幕之前获取到数据。本文中，你将学到，在路由更改前怎么获取到数据。通过本文，你将学会使用resolver，在AngularApp中应用re...

边做游戏边划水: 基于浅水方程的水面交互、河道交互模拟方法

以下文章来源于腾讯游戏学堂，作者Byreave篇一：基于浅水方程的水面交互本文主要介绍一种基于浅水方程的水体交互算法，在基本保持水体交互效果的前提下，实现了一种极简的水面模拟和物体交互方法。真实感的...

Nacos介绍及使用

一、Nacos介绍Nacos是SpringCloudAlibaba架构中最重要的组件。Nacos是一个更易于帮助构建云原生应用的动态服务发现、配置和服务管理平台，提供注册中心、配置中心和动态DNS...

Spring 中@Autowired，@Resource，@Inject 注解实现原理

使用案例前置条件：现在有一个Vehicle接口，它有两个实现类Bus和Car，现在还有一个类VehicleService需要注入一个Vehicle类型的Bean：publicinte...

一文带你搞懂Vue3 底层源码

作者：妹红大大转发链接：https://mp.weixin.qq.com/s/D_PRIMAD6i225Pn-a_lzPA前言vue3出来有一段时间了。今天正式开始记录一下梗vue3.0.0-be...

一线开发大牛带你深度解析探讨模板解释器，解释器的生成

解释器生成解释器的机器代码片段都是在TemplateInterpreterGenerator::generate_all()中生成的，下面将分小节详细展示该函数的具体细节，以及解释器某个组件的机器代码...

Nacos源码—9.Nacos升级gRPC分析五

大纲10.gRPC客户端初始化分析11.gRPC客户端的心跳机制(健康检查)12.gRPC服务端如何处理客户端的建立连接请求13.gRPC服务端如何映射各种请求与对应的Handler处理类14.gRP...

聊聊Spring AI的Tool Calling

序本文主要研究一下SpringAI的ToolCallingToolCallbackorg/springframework/ai/tool/ToolCallback.javapublicinter...

「云原生」Containerd ctr，crictl 和 nerdctl 命令介绍与实战操作

一、概述作为接替Docker运行时的Containerd在早在Kubernetes1.7时就能直接与Kubelet集成使用，只是大部分时候我们因熟悉Docker，在部署集群时采用了默认的dockers...

在MySQL登录时出现Access denied for user ~~ (using password: YES)

Windows~~~在MySQL登录时出现Accessdeniedforuser‘root‘@‘localhost‘(usingpassword:YES)，并修改MySQL密码目录适用...

mysql 8.0多实例批量部署script

背景最近一个项目上，客户需要把阿里云的rdsformysql数据库同步至线下，用作数据的灾备，需要在线下的服务器上部署mysql8.0多实例，为了加快部署的速度，写了一个脚本。解决方案#!/bi...

一周热门
最近发表
标签列表