Flutter drawFrame()

发表于 更新于 评论： 阅读次数：

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

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

RendererBinding.drawFrame() 的源码如下：

1
2
3
4
5
6
7
8
9
10
11
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。