本文主要介绍RendererBinding.drawFrame() 负责生成帧。这个方法对于理解 Flutter 渲染过程非常重要。简单了解下。

RendererBinding.drawFrame()SchedulerBinding.handleDrawFrame() 方法调用,而后者又自动被引擎调用(如果引擎需要布局和绘制一帧的话)。

RendererBinding.drawFrame() 的源码如下:

void drawFrame() {
    assert(renderView != null);
    // 布局
    pipelineOwner.flushLayout();
    // 检查是否需要重绘
    pipelineOwner.flushCompositingBits();
    // 重绘
    pipelineOwner.flushPaint();
    renderView.compositeFrame(); // this sends the bits to the GPU
    pipelineOwner.flushSemantics(); // this also sends the semantics to the OS.
}

flushPaint() 调用 PaintingContext.repaintCompositedChild(node) 方法,后者是真正的绘制逻辑。

每帧由以下几个阶段组成:

  1. 动画阶段 - SchedulerBinding.handleBeginFrame (由 Window.onBeginFrame 注册),按注册顺序调用所有的临时帧回调 (由 scheduleFrameCallback 注册)。这些回调包括所有用于驱动 AnimationController 对象的 Ticker 实例,即该时间点的所有活跃 Animation 对象。
  2. Microtasks - handleBeginFrame 返回后,由临时帧回调注册的方法调度的 microtasks 开始运行。之后,由 Window.onDrawFrame 注册的 handleDrawFrame 回调开始执行,它调用所有的持久帧回调。其中最重要的是 drawFrame 方法,它的处理过程如下
  3. 布局阶段 - 对系统中的所有标记为脏的 RenderObject (如何将对象标脏以便布局,可参考 RenderObject.markNeedsLayout) 进行布局
  4. compositing bits 阶段 - 更新所有标脏 RenderObject 中的 compositing bits。具体参考 RenderObject.markNeedsCompositingBitsUpdate
  5. 绘制阶段 - 系统中的所有标脏 RenderObject 被重绘。这个过程生成 Layer 树。如何将对象标脏以便绘制,可参考 RenderObject.markNeedsPaint
  6. 合成阶段 - 将 layer tree 转换成 Scene 并发送到 GPU
  7. semantics 阶段 - 系统中的所有标脏 RenderObject 的 semantics 被更新。具体见 RenderObject.semanticsAnnotator。这个过程生成 SemanticsNode 树。如何将对象标脏以用于 semantics,可参考 RenderObject.markNeedsSemanticsUpdate
  8. 步骤 3-7 的细节请参考 PipelineOwner
  9. 结束阶段 - drawFrame 返回后,handleDrawFrame 调用 post-frame 回调。(由 addPostFrameCallback 注册)

注意:某些绑定会向上述过程添加额外步骤,比如,WidgetsBinding 会添加 WidgetsBinding.drawFrame