Flutter 一帧的变化

前言

Flutter 3.10.6 • channel stable • https://github.com/flutter/flutter.git Framework • revision f468f3366c • 2023-07-12 15:19:05 -0700 Engine • revision cdbeda788a Tools • Dart 3.0.6 • DevTools 2.23.1

我们从setState函数开始渐进式步入流程

setState 函数一般是用在 StatefulWidget 中

本文初始代码结构如下：

import 'package:flutter/material.dart';

class Frame extends StatefulWidget {
  const Frame({Key? key}) : super(key: key);

  @override
  State<Frame> createState() => _FrameState();
}

class _FrameState extends State<Frame> {
  int _count = 0;

  void _handleAdd() => setState(() => _count++);

  void _handleSub() => setState(() => _count++);

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      OutlinedButton(onPressed: _handleAdd, child: const Text("Add")),
      Text("$_count"),
      OutlinedButton(onPressed: _handleSub, child: const Text("Sub")),
    ]);
  }
}

开始

用户点击Add按钮后触发onPressed回调最终调用到setState函数

setState(() => _count++)

1.State#setState

@protected
void setState(VoidCallback fn) {
  final Object? result = fn() as dynamic;
  _element!.markNeedsBuild();
}

此函数会执行传递过来的回调，在此时在State上挂载的_count就已经更新了，只不过视图还没有刷新。

执行markNeedsBuild， 这是刷新视图方法， 保证我们更新的数据重新渲染上图。

_element 的类型是Element, Element实现了BuildContext，所以在build函数中我们得到的context其实就是Element。

abstract class Element extends DiagnosticableTree implements BuildContext {...}

2. Element#markNeedsBuild

void markNeedsBuild() {
  if (_lifecycleState != _ElementLifecycle.active) return;
  if (dirty) return;
  _dirty = true;
  owner!.scheduleBuildFor(this);
}

在此函数中判断了 element的生命周期状态。

Element一共有 4 个状态：

// Element生命周期
enum _ElementLifecycle {
  initial, // 初始状态
  active, // 激活状态
  inactive, // 未激活状态
  defunct, // 销毁状态
}

必须在 active 阶段才能继续进行，进而开始标记此 element 为 脏数据 _dirty ，方便Flutter刷新时会找有此标记的element进行更新，如果已经标记过了就直接终止了，防止重复刷新视图。

最后执行 owner!.scheduleBuildFor。

owner 的类型是 BuildOwner， 是管理 element 生命周期的一个类。

class BuildOwner {...}

3.BuildOwner#scheduleBuildFor

void scheduleBuildFor(Element element) {
  if (element._inDirtyList) {
    _dirtyElementsNeedsResorting = true;
    return;
  }
  if (!_scheduledFlushDirtyElements && onBuildScheduled != null) {
    _scheduledFlushDirtyElements = true;
    onBuildScheduled!();
  }
  _dirtyElements.add(element); // 加入到脏列表中
  element._inDirtyList = true; // 把此标记设置为true
}

在此函数中主要是标记一些属性，这些属性是为了方便判断更新时做的。

_dirtyElementsNeedsResorting：表示是否需要再次给此element排序，因为在构建时会有其他的脏element加入到_dirtyElements列表中。

_scheduledFlushDirtyElements：表示是否已调度冲刷脏列表。

onBuildScheduled：是在应用初始化的时候就已经赋值了，主要是一些回调的注册。

WidgetsBinding#initInstances

@override
void initInstances() {
  super.initInstances();
  _instance = this;
  // Initialization of [_buildOwner] has to be done after
  // [super.initInstances] is called, as it requires [ServicesBinding] to
  // properly setup the [defaultBinaryMessenger] instance.
  _buildOwner = BuildOwner();
  // 设置onBuildScheduled方法
  buildOwner!.onBuildScheduled = _handleBuildScheduled;
  platformDispatcher.onLocaleChanged = handleLocaleChanged;
  SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);
  platformMenuDelegate = DefaultPlatformMenuDelegate();
}

4.BuildOwner#onBuildScheduled

  void _handleBuildScheduled() {
    // If we're in the process of building dirty elements, then changes
    // should not trigger a new frame.
    assert(() {
      if (debugBuildingDirtyElements) {
        throw FlutterError.fromParts(<DiagnosticsNode>[
          ErrorSummary('Build scheduled during frame.'),
          ErrorDescription(
            'While the widget tree was being built, laid out, and painted, '
            'a new frame was scheduled to rebuild the widget tree.',
          ),
          ErrorHint(
            'This might be because setState() was called from a layout or '
            'paint callback. '
            'If a change is needed to the widget tree, it should be applied '
            'as the tree is being built. Scheduling a change for the subsequent '
            'frame instead results in an interface that lags behind by one frame. '
            'If this was done to make your build dependent on a size measured at '
            'layout time, consider using a LayoutBuilder, CustomSingleChildLayout, '
            'or CustomMultiChildLayout. If, on the other hand, the one frame delay '
            'is the desired effect, for example because this is an '
            'animation, consider scheduling the frame in a post-frame callback '
            'using SchedulerBinding.addPostFrameCallback or '
            'using an AnimationController to trigger the animation.',
          ),
        ]);
      }
      return true;
    }());
    ensureVisualUpdate();
  }

此函数中断言了当前的帧，如果我们正在构建脏元素，那么不应该触发新的一帧，应该在当前帧中完成。

然后执行 ensureVisualUpdate。

5.SchedulerBinding#ensureVisualUpdate

void ensureVisualUpdate() {
  switch (schedulerPhase) {
    case SchedulerPhase.idle:
    case SchedulerPhase.postFrameCallbacks:
      scheduleFrame();
      return;
    case SchedulerPhase.transientCallbacks:
    case SchedulerPhase.midFrameMicrotasks:
    case SchedulerPhase.persistentCallbacks:
      return;
  }
}

在此函数主要功能是判断当前的 Flutter 调度是在哪个阶段。

调度器一共有 5 个阶段的状态

// 调度器阶段
enum SchedulerPhase {
  idle, // 空闲阶段
  transientCallbacks, // 短暂阶段 （动画）
  midFrameMicrotasks, // 中间帧阶段 （承上启下）
  persistentCallbacks, // 构建布局与渲染阶段（持久）
  postFrameCallbacks, // 帧尾阶段
}

如果当前阶段是在idle或postFrameCallbacks时才会生成新的一帧。

如果是其他阶段就不进行处理，因为其他阶段的任务还没有处理完，就表示这一帧还没有结束。

所有的阶段是依次进行调用的。

然而如果我们自己设计生命周期的话，肯定会用到await来等待某一生命周期的完成。但是的话Flutter在执行时会通过Engine来执行帧或者渲染之类的操作，所以当前的状态就不受函数内控制了。在处理这些阶段时会通过回调来进行处理，后面会讲到。

6.SchedulerBinding#scheduleFrame

void scheduleFrame() {
  if (_hasScheduledFrame || !framesEnabled) return;
  ensureFrameCallbacksRegistered();
  platformDispatcher.scheduleFrame();
  _hasScheduledFrame = true;
}

此函数中判断当前帧是否在调度，已经在调度中或者当前帧未激活就终止生成新帧。

_hasScheduledFrame：是否正在调度中

framesEnabled：是否启动帧， 此函数由修改AppLifecycleState 生命周期时来一并控制的。

AppLifecycleState共有 4 个状态：

enum AppLifecycleState {
  resumed, // 应用程序处于活动状态，正在响应用户输入(用户正在使用程序)
  inactive, // 应用程序处于非活动状态，不接收用户输入（用户没有使用或聚焦程序，但是还是在前台）
  paused, // 应用程序当前不可见，不响应用户输入，但在后台运行（隐藏到任务栏/控制台中）
  detached, // 应用程序仍运行在 Flutter 引擎中，但已与任何主机视图分离（页面已经关闭了）
}

只有在可见的情况下resumed、inactive才会进行调度，在paused、detached情况下就不进行调度了。

SchedulerBinding#handleAppLifecycleStateChanged

@protected
@mustCallSuper
void handleAppLifecycleStateChanged(AppLifecycleState state) {
  _lifecycleState = state;
  switch (state) {
    case AppLifecycleState.resumed:
    case AppLifecycleState.inactive:
      _setFramesEnabledState(true);
    case AppLifecycleState.paused:
    case AppLifecycleState.detached:
      _setFramesEnabledState(false);
  }
}

SchedulerBinding#_setFramesEnabledState

void _setFramesEnabledState(bool enabled) {
  if (_framesEnabled == enabled) {
    return;
  }
  _framesEnabled = enabled;
  if (enabled) {
    scheduleFrame();
  }
}

让我们回到6.scheduleFrame中继续执行。

ensureFrameCallbacksRegistered ：注册帧回调

platformDispatcher.scheduleFrame ：触发Flutter 引擎调度

platformDispatcher： 是Flutter Engine与Scheduler之间的交互接口，是主机操作系统最基本的接口

6.1.SchedulerBinding#ensureFrameCallbacksRegistered

@protected
void ensureFrameCallbacksRegistered() {
  platformDispatcher.onBeginFrame ??= _handleBeginFrame;
  platformDispatcher.onDrawFrame ??= _handleDrawFrame;
}

此函数中向引擎注册了两个回调。

onBeginFrame：开始帧

onDrawFrame：绘制帧

让我们回到6.scheduleFrame中继续执行。

6.2.ui.PlatformDispatcher#scheduleFrame

void scheduleFrame() => _scheduleFrame();

@Native<Void Function()>(symbol: 'PlatformConfigurationNativeApi::ScheduleFrame')
external static void _scheduleFrame();

此函数去调用Flutter Engine的api来触发一帧。

至此scheduleFrame注册回调等初始工作就做完了，等待 Flutter 引擎的调用。

让我们来看看在引擎中是如何触发调度的。

7.PlatformConfigurationNativeApi::ScheduleFrame

以下代码片段是 Engine方法调用图：

void PlatformConfigurationNativeApi::ScheduleFrame() {
  UIDartState::ThrowIfUIOperationsProhibited();
  UIDartState::Current()->platform_configuration()->client()->ScheduleFrame(); // entry
}

void RuntimeController::ScheduleFrame() {
  client_.ScheduleFrame(); // entry
}

void Engine::ScheduleFrame(bool regenerate_layer_tree) {
  animator_->RequestFrame(regenerate_layer_tree); // entry
}

void Animator::RequestFrame(bool regenerate_layer_tree) {
  if (regenerate_layer_tree) {
    TRACE_EVENT_ASYNC_BEGIN0("flutter", "Frame Request Pending", frame_request_number_);
    regenerate_layer_tree_ = true;
  }

  if (!pending_frame_semaphore_.TryWait()) return;

  // The AwaitVSync is going to call us back at the next VSync. However, we want
  // to be reasonably certain that the UI thread is not in the middle of a
  // particularly expensive callout. We post the AwaitVSync to run right after
  // an idle. This does NOT provide a guarantee that the UI thread has not
  // started an expensive operation right after posting this message however.
  // To support that, we need edge triggered wakes on VSync.
  task_runners_.GetUITaskRunner()->PostTask(
      [self = weak_factory_.GetWeakPtr()]() {
        if (!self) return;
        self->AwaitVSync(); // entry
      });
  frame_scheduled_ = true;
}

void Animator::AwaitVSync() {
  waiter_->AsyncWaitForVsync(
      [self = weak_factory_.GetWeakPtr()](std::unique_ptr<FrameTimingsRecorder> frame_timings_recorder) {
        if (self) {
          if (self->CanReuseLastLayerTree()) {
            self->DrawLastLayerTree(std::move(frame_timings_recorder));
          } else {
            self->BeginFrame(std::move(frame_timings_recorder)); // entry
          }
        }
      });
  if (has_rendered_) {
    delegate_.OnAnimatorNotifyIdle(dart_frame_deadline_);
  }
}

void Animator::BeginFrame(std::unique_ptr<FrameTimingsRecorder> frame_timings_recorder) {
  TRACE_EVENT_ASYNC_END0("flutter", "Frame Request Pending", frame_request_number_);
  frame_request_number_++;

  frame_timings_recorder_ = std::move(frame_timings_recorder);
  frame_timings_recorder_->RecordBuildStart(fml::TimePoint::Now());

  TRACE_EVENT_WITH_FRAME_NUMBER(frame_timings_recorder_, "flutter", "Animator::BeginFrame");
  while (!trace_flow_ids_.empty()) {
    uint64_t trace_flow_id = trace_flow_ids_.front();
    TRACE_FLOW_END("flutter", "PointerEvent", trace_flow_id);
    trace_flow_ids_.pop_front();
  }

  frame_scheduled_ = false;
  regenerate_layer_tree_ = false;
  pending_frame_semaphore_.Signal();

  if (!producer_continuation_) {
    // We may already have a valid pipeline continuation in case a previous
    // begin frame did not result in an Animator::Render. Simply reuse that
    // instead of asking the pipeline for a fresh continuation.
    producer_continuation_ = layer_tree_pipeline_->Produce();

    if (!producer_continuation_) {
      // If we still don't have valid continuation, the pipeline is currently
      // full because the consumer is being too slow. Try again at the next
      // frame interval.
      TRACE_EVENT0("flutter", "PipelineFull");
      RequestFrame();
      return;
    }
  }

  // We have acquired a valid continuation from the pipeline and are ready
  // to service potential frame.
  FML_DCHECK(producer_continuation_);
  const fml::TimePoint frame_target_time = frame_timings_recorder_->GetVsyncTargetTime();
  dart_frame_deadline_ = frame_target_time.ToEpochDelta();
  uint64_t frame_number = frame_timings_recorder_->GetFrameNumber();
  delegate_.OnAnimatorBeginFrame(frame_target_time, frame_number); // entry

  if (!frame_scheduled_ && has_rendered_) {
    // Wait a tad more than 3 60hz frames before reporting a big idle period.
    // This is a heuristic that is meant to avoid giving false positives to the
    // VM when we are about to schedule a frame in the next vsync, the idea
    // being that if there have been three vsyncs with no frames it's a good
    // time to start doing GC work.
    task_runners_.GetUITaskRunner()->PostDelayedTask(
        [self = weak_factory_.GetWeakPtr()]() {
          if (!self) { return; }
          auto now = fml::TimeDelta::FromMicroseconds(Dart_TimelineGetMicros());
          // If there's a frame scheduled, bail.
          // If there's no frame scheduled, but we're not yet past the last
          // vsync deadline, bail.
          if (!self->frame_scheduled_ && now > self->dart_frame_deadline_) {
            TRACE_EVENT0("flutter", "BeginFrame idle callback");
            self->delegate_.OnAnimatorNotifyIdle(now + fml::TimeDelta::FromMilliseconds(100));
          }
        },
        kNotifyIdleTaskWaitTime
    );
  }
}

void Shell::OnAnimatorBeginFrame(fml::TimePoint frame_target_time, uint64_t frame_number) {
  FML_DCHECK(is_setup_);
  FML_DCHECK(task_runners_.GetUITaskRunner()->RunsTasksOnCurrentThread());
  // record the target time for use by rasterizer.
  {
    std::scoped_lock time_recorder_lock(time_recorder_mutex_);
    latest_frame_target_time_.emplace(frame_target_time);
  }
  if (engine_) {
    engine_->BeginFrame(frame_target_time, frame_number); // entry
  }
}

void Engine::BeginFrame(fml::TimePoint frame_time, uint64_t frame_number) {
  runtime_controller_->BeginFrame(frame_time, frame_number); // entry
}

bool RuntimeController::BeginFrame(fml::TimePoint frame_time, uint64_t frame_number) {
  if (auto* platform_configuration = GetPlatformConfigurationIfAvailable()) {
    platform_configuration->BeginFrame(frame_time, frame_number); // entry
    return true;
  }

  return false;
}

void PlatformConfiguration::BeginFrame(fml::TimePoint frameTime, uint64_t frame_number) {
  std::shared_ptr<tonic::DartState> dart_state = begin_frame_.dart_state().lock();
  if (!dart_state) return;

  tonic::DartState::Scope scope(dart_state);

  int64_t microseconds = (frameTime - fml::TimePoint()).ToMicroseconds();

  // 调用dart#onBeginFrame方法
  tonic::CheckAndHandleError(
      tonic::DartInvoke(begin_frame_.Get(), {
                                                Dart_NewInteger(microseconds),
                                                Dart_NewInteger(frame_number),
                                            }));

  UIDartState::Current()->FlushMicrotasksNow();
  // 调用dart#onDrawFrame方法
  tonic::CheckAndHandleError(tonic::DartInvokeVoid(draw_frame_.Get()));
}

通过一系列的 C/C++代码调用，最终锁定到上面的代码，请注意两个方法

tonic::DartInvoke(begin_frame_.Get(), ...)： 调用 platformDispatcher.onBeginFrame

tonic::DartInvoke(draw_frame_.Get())：调用platformDispatcher.onDrawFrame

这两个方法就是调用之前我们在6.1.ensureFrameCallbacksRegistered中注册的两个帧回调， 首先触发开始帧，然后触发绘制帧。

8.SchedulerBinding#_handleBeginFrame

void _handleBeginFrame(Duration rawTimeStamp) {
  if (_warmUpFrame) {
    // "begin frame" and "draw frame" must strictly alternate. Therefore
    // _rescheduleAfterWarmUpFrame cannot possibly be true here as it is
    // reset by _handleDrawFrame.
    assert(!_rescheduleAfterWarmUpFrame);
    _rescheduleAfterWarmUpFrame = true;
    return;
  }
  handleBeginFrame(rawTimeStamp);
}

该函数判断是否是预热帧，然后再处理开始帧。

开始帧的主要作用就是处理一些动画的操作，比如处理一些Ticker, AnimationController的状态之类的。

_warmUpFrame：预热帧（热加载）

注意此_warmUpFrame预热帧是在初始化或者热加载的时候设置的，因为在此时是不需要进行处理开始帧的，也就是说此时是不需要进行动画的更新操作的，可以直接进行绘制帧。但是我们这里不是初始化或者热加载，所以继续执行。

9.SchedulerBinding#handleBeginFrame

void handleBeginFrame(Duration? rawTimeStamp) {
  _frameTimelineTask?.start('Frame');
  _firstRawTimeStampInEpoch ??= rawTimeStamp;
  _currentFrameTimeStamp = _adjustForEpoch(rawTimeStamp ?? _lastRawTimeStamp);
  if (rawTimeStamp != null) {
    _lastRawTimeStamp = rawTimeStamp;
  }
  assert(schedulerPhase == SchedulerPhase.idle);
  _hasScheduledFrame = false;
  try {
    // TRANSIENT FRAME CALLBACKS
    _frameTimelineTask?.start('Animate');
    _schedulerPhase = SchedulerPhase.transientCallbacks;
    final Map<int, _FrameCallbackEntry> callbacks = _transientCallbacks;
    _transientCallbacks = <int, _FrameCallbackEntry>{};
    callbacks.forEach((int id, _FrameCallbackEntry callbackEntry) {
      if (!_removedIds.contains(id)) {
        _invokeFrameCallback(callbackEntry.callback, _currentFrameTimeStamp!, callbackEntry.debugStack);
      }
    });
    _removedIds.clear();
  } finally {
    _schedulerPhase = SchedulerPhase.midFrameMicrotasks;
  }
}

此函数中主要是执行注册在_transientCallbacks的回调并修改SchedulerPhase当前调度阶段。

_frameTimelineTask： 表示帧的时间线任务状态，发布版本是没有的，只是调试的时候用，所有这里不做讨论。

紧接着断言当前调度阶段必须为idle,才能继续往下执行，因为这里是一帧的初始阶段。

这里从idel阶段进阶到transientCallbacks阶段并调用所有在此阶段注册的回调，并清空该回调列表。

这些回调就是处理一些Ticker的状态。

比如 AnimationController 的 vsync 参数，是为了让 AnimationController 内部使用 Ticker 对象来驱动动画的播放，因为在进行动画时需要知道当前帧的情况，然后通过tick回调进行动画数值的修改。

最后从transientallbacks阶段进阶midFrameMicrotasks阶段。

在midFrameMicrotasks阶段目前没有任何回调，仅作为连接开始帧与渲染帧的中间帧。

至此开始帧就结束了，在开始帧阶段系统就把所有需要更新的动画更新到新的状态， 紧接着开始调用渲染帧。

10.SchedulerBinding#_handleDrawFrame

void _handleDrawFrame() {
  if (_rescheduleAfterWarmUpFrame) {
    _rescheduleAfterWarmUpFrame = false;
    // Reschedule in a post-frame callback to allow the draw-frame phase of
    // the warm-up frame to finish.
    addPostFrameCallback((Duration timeStamp) {
      // Force an engine frame.
      //
      // We need to reset _hasScheduledFrame here because we cancelled the
      // original engine frame, and therefore did not run handleBeginFrame
      // who is responsible for resetting it. So if a frame callback set this
      // to true in the "begin frame" part of the warm-up frame, it will
      // still be true here and cause us to skip scheduling an engine frame.
      _hasScheduledFrame = false;
      scheduleFrame();
    });
    return;
  }
  handleDrawFrame();
}

在此函数中判断是否需要重新调度，此判断是在之前beginFrame函数中与_warmUpFrame配套使用的。

11.SchedulerBinding#handleDrawFrame

void handleDrawFrame() {
  assert(_schedulerPhase == SchedulerPhase.midFrameMicrotasks);
  _frameTimelineTask?.finish(); // end the "Animate" phase
  try {
    // PERSISTENT FRAME CALLBACKS
    _schedulerPhase = SchedulerPhase.persistentCallbacks;

    for (final FrameCallback callback in _persistentCallbacks) {
      _invokeFrameCallback(callback, _currentFrameTimeStamp!);
    }

    // POST-FRAME CALLBACKS
    _schedulerPhase = SchedulerPhase.postFrameCallbacks;
    final List<FrameCallback> localPostFrameCallbacks =
      List<FrameCallback>.of(_postFrameCallbacks);
    _postFrameCallbacks.clear();

    for (final FrameCallback callback in localPostFrameCallbacks) {
      _invokeFrameCallback(callback, _currentFrameTimeStamp!);
    }
  } finally {
    _schedulerPhase = SchedulerPhase.idle;
    _frameTimelineTask?.finish(); // end the Frame
    _currentFrameTimeStamp = null;
  }
}

此函数主要是处理两个列表：

• _persistentCallbacks： 持久回调列表，处理构建、布局、渲染等
• _postFrameCallbacks：帧尾回调列表

在函数开始就断言了当前调度阶段必须为midFrameMicrotasks，代表是我是从开始帧结束后切换过来的，只能交叉的调用。

从midFrameMicrotasks阶段变成persistentCallbacks阶段并调用此阶段所有注册的回调。

回调完成后并没有与transientCallbacks一样清空回调，而是持久保存下来，下一帧的时候又会调用，因为此回调在每次进行一帧的调用时都会进行构建渲染Widget等操作，如果取消的话下帧又要重新注册进来，影响性能，所以收益不大。

有一些回调是跟随着RendererBinding初始化进行添加的：

RendererBinding#initInstances

void initInstances() {
  super.initInstances();
  _instance = this;

  _pipelineOwner = PipelineOwner(
    onSemanticsOwnerCreated: _handleSemanticsOwnerCreated,
    onSemanticsUpdate: _handleSemanticsUpdate,
    onSemanticsOwnerDisposed: _handleSemanticsOwnerDisposed,
  );

  platformDispatcher
    ..onMetricsChanged = handleMetricsChanged
    ..onTextScaleFactorChanged = handleTextScaleFactorChanged
    ..onPlatformBrightnessChanged = handlePlatformBrightnessChanged;

  initRenderView();

  addPersistentFrameCallback(_handlePersistentFrameCallback); // 添加到列表

  initMouseTracker();

  if (kIsWeb) {
    addPostFrameCallback(_handleWebFirstFrame);
  }
  _pipelineOwner.attach(_manifold);
}

让我们看看是如果进行处理的。

12.RendererBinding#_handlePersistentFrameCallback

void _handlePersistentFrameCallback(Duration timeStamp) {
  drawFrame();
  _scheduleMouseTrackerUpdate();
}

注意：此函数中看似调用了当前RendererBinding的drawFrame方法，其实在应用初始化WidgetsFlutterBinding时在WidgetsBinding中重写了此方法：

class WidgetsFlutterBinding extends BindingBase with GestureBinding, SchedulerBinding, ServicesBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding {
  /// Returns an instance of the binding that implements
  /// [WidgetsBinding]. If no binding has yet been initialized, the
  /// [WidgetsFlutterBinding] class is used to create and initialize
  /// one.
  ///
  /// You only need to call this method if you need the binding to be
  /// initialized before calling [runApp].
  ///
  /// In the `flutter_test` framework, [testWidgets] initializes the
  /// binding instance to a [TestWidgetsFlutterBinding], not a
  /// [WidgetsFlutterBinding]. See
  /// [TestWidgetsFlutterBinding.ensureInitialized].
  static WidgetsBinding ensureInitialized() {
    if (WidgetsBinding._instance == null) {
      WidgetsFlutterBinding();
    }
    return WidgetsBinding.instance;
  }
}

13.WidgetsBinding#drawFrame

@override
void drawFrame() {
  TimingsCallback? firstFrameCallback;
  if (_needToReportFirstFrame) {
    firstFrameCallback = (List<FrameTiming> timings) {
      SchedulerBinding.instance.removeTimingsCallback(firstFrameCallback!);
      firstFrameCallback = null;
      _firstFrameCompleter.complete();
    };
    // Callback is only invoked when FlutterView.render is called. When
    // sendFramesToEngine is set to false during the frame, it will not be
    // called and we need to remove the callback (see below).
    SchedulerBinding.instance.addTimingsCallback(firstFrameCallback!);
  }

  try {
    if (rootElement != null) {
      buildOwner!.buildScope(rootElement!); // 重新构建脏列表
    }
    super.drawFrame(); // 绘制上图
    buildOwner!.finalizeTree(); // 卸载不必要的element
  } finally {}
  _needToReportFirstFrame = false;
  if (firstFrameCallback != null && !sendFramesToEngine) {
    // This frame is deferred and not the first frame sent to the engine that
    // should be reported.
    _needToReportFirstFrame = true;
    SchedulerBinding.instance.removeTimingsCallback(firstFrameCallback!);
  }
}

此函数中判断了首帧处理的情况并且addTimingsCallback添加的回调在 FlutterView.render 调用时被回调，一般用于性能监控等。

此函数最为重要的 3 个方法：

buildOwner!.buildScope(rootElement!)： 重新构建脏列表

super.drawFrame()：绘制上图

buildOwner!.finalizeTree()：卸载不必要的 element

rootElement： 在runApp中传递的Widget的element， 正常情况下都会存在的

13.1.buildOwner#buildScope

@pragma('vm:notify-debugger-on-exception')
  void buildScope(Element context, [ VoidCallback? callback ]) {
    if (callback == null && _dirtyElements.isEmpty) return;

    try {
      _scheduledFlushDirtyElements = true;
      if (callback != null) {
        Element? debugPreviousBuildTarget;
        _dirtyElementsNeedsResorting = false;
        try {
          callback();
        } finally {...}
      }
      _dirtyElements.sort(Element._sort);
      _dirtyElementsNeedsResorting = false;
      int dirtyCount = _dirtyElements.length;
      int index = 0;
      while (index < dirtyCount) {
        final Element element = _dirtyElements[index];

        try {
          element.rebuild();
        } catch (e, stack) {...}
        index += 1;
        if (dirtyCount < _dirtyElements.length || _dirtyElementsNeedsResorting!) {
          _dirtyElements.sort(Element._sort);
          _dirtyElementsNeedsResorting = false;
          dirtyCount = _dirtyElements.length;
          while (index > 0 && _dirtyElements[index - 1].dirty) {
            index -= 1;
          }
        }
      }
    } finally {
      for (final Element element in _dirtyElements) {
        assert(element._inDirtyList);
        element._inDirtyList = false;
      }
      _dirtyElements.clear();
      _scheduledFlushDirtyElements = false;
      _dirtyElementsNeedsResorting = null;
    }
  }

此函数中以深度遍历的方式处理标记为脏的element列表。

要保证更新element列表时，不能存在相互依赖，因为这次依赖会导致无限循环，所以使用深度遍历的排序来保证最小作用域。

通过调用element的rebuild方法进行构建。

 @pragma('vm:prefer-inline')
  void rebuild({bool force = false}) {
    if (_lifecycleState != _ElementLifecycle.active || (!_dirty && !force)) return;
    assert(_lifecycleState == _ElementLifecycle.active);
    try {
      performRebuild();
    } finally {...}
    assert(!_dirty);
  }

此函数首先经过了一系列的判断与断言，保证了在重建的时候此element是active的状态，然后调用performRebuild方法进行重建。

@protected
@mustCallSuper
void performRebuild() {
  _dirty = false;
}

在Element基类中仅修改了dirty的状态，所有Element子类都直接或间接继承此Elemnt，所以根据不同的Element子类都有不同的重建规则。

在这里我们举例 StatefulElement：

继承关系为：StatefulElement => ComponentElement => Element。

StatefulElement#performRebuild

@override
void performRebuild() {
  if (_didChangeDependencies) {
    state.didChangeDependencies();
    _didChangeDependencies = false;
  }
  super.performRebuild();
}

在performRebuild中判断祖先级的结构是否有变化，有变化触发didChangeDependencies方法。

调用父级的performRebuild方法，StatefulElement继承自ComponentElement。

@override
@pragma('vm:notify-debugger-on-exception')
void performRebuild() {
  Widget? built;
  try {
    built = build();
  } catch (e, stack) {...}
  finally {
    // We delay marking the element as clean until after calling build() so
    // that attempts to markNeedsBuild() during build() will be ignored.
    super.performRebuild(); // clears the "dirty" flag
  }
  try {
    _child = updateChild(_child, built, slot);
  } catch (e, stack) {...}
}

在函数中调用了build进行构建当前的Widget。

构建完成后调用父级Element清除dirty的状态。

然后通过updateChild更新后来设置_child， 这个_child是新生成的Widget的element，并不是自身的element， 即此_child是子级的element。

来看看updateChild是如何更新的：

13.1.1.Element#updateChild

@protected
@pragma('vm:prefer-inline')
Element? updateChild(Element? child, Widget? newWidget, Object? newSlot) {
  if (newWidget == null) {
    if (child != null) deactivateChild(child); // 分离当前的element。
    return null;
  }

  final Element newChild;

  if (child != null) {
    bool hasSameSuperclass = true;
    if (hasSameSuperclass && child.widget == newWidget) {
      if (child.slot != newSlot) {
        updateSlotForChild(child, newSlot);
      }
      newChild = child;
    } else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)) {
      if (child.slot != newSlot) {
        updateSlotForChild(child, newSlot);
      }
      child.update(newWidget);
      newChild = child;
    } else {
      deactivateChild(child);
      newChild = inflateWidget(newWidget, newSlot);
    }
  } else {
    newChild = inflateWidget(newWidget, newSlot);
  }

  return newChild;
}

这个函数主要是通过旧的child生成新的child， 类型是Element。

deactivateChild：分离当前的 element。

Element#deactivateChild

@protected
void deactivateChild(Element child) {
  child._parent = null;
  child.detachRenderObject();
  owner!._inactiveElements.add(child); // this eventually calls child.deactivate()
}

把父级解除后，加入到了_inactiveElements列表，这个列表主要是一些未激活 element列表，最后会统一卸载掉。

我们回到updateChild中。

它在函数中进行一些构建的判断：

• 父节点相同 并且 旧 widget 与新 widget 相同

如果插槽不同，那么更新插槽。

slot：插槽， 确定子节点在父节点的子节点列表中的位置信息。

然后把旧的child赋值给newChild。

• 父节点相同 并且 Widget 可以更新

Widget.canUpdate： 只判断两个 Widget 的 runtimeType 与 key 是否相等。

Widget#Widget.canUpdate

static bool canUpdate(Widget oldWidget, Widget newWidget) {
  return oldWidget.runtimeType == newWidget.runtimeType
    && oldWidget.key == newWidget.key;
}

接着往下走。

如果插槽不同，就更新插槽；

通过child.update方法更新新的widget，Widget就相当于Element的配置。

@override
void update(StatefulWidget newWidget) {
  super.update(newWidget);
  final StatefulWidget oldWidget = state._widget!;
  state._widget = widget as StatefulWidget;
  final Object? debugCheckForReturnedFuture = state.didUpdateWidget(oldWidget) as dynamic;
  rebuild(force: true);
}

Element#update

@mustCallSuper
void update(covariant Widget newWidget) {
  _widget = newWidget;
}

用新的widget配置替换旧的widget， 这里替换的是element的widget。

state._widget = widget：接着使用新的widget替换state的widget。

然后调用state.didUpdateWidget，通知这个widget已经被更新了。

在state.didUpdateWidget中只能访问新的widget，因为其他都没有更新完，所以在这里回调调用一些element的操作会报错，一般会把这些操作放到帧尾来使用，通过addPostFrameCallback添加。

然后把旧的child赋值给newChild，因为在此判断中child与newChild是相等的。

其余的情况最后都是通过inflateWidget方法生成新的child赋值给newChild。

Element#inflateWidget

@protected
@pragma('vm:prefer-inline')
Element inflateWidget(Widget newWidget, Object? newSlot) {
  try {
    final Key? key = newWidget.key;
    if (key is GlobalKey) {
      final Element? newChild = _retakeInactiveElement(key, newWidget);
      if (newChild != null) {
        newChild._activateWithParent(this, newSlot);
        final Element? updatedChild = updateChild(newChild, newWidget, newSlot);
        return updatedChild!;
      }
    }
    final Element newChild = newWidget.createElement();
    newChild.mount(this, newSlot);
    return newChild;
  } finally {...}
}

简单来说这个函数就是，通过widget配置生成element并挂载。

首先判断这个key是否是GlobalKey，如果是那就不走正常流程了，因为我们知道可以通过GlobalKey可以进行element实例的访问，比如说是Context或State等。

首先判断这个key是否是GlobalKey，如果是那就尝试通过_retakeInactiveElement来获取element。

 Element? _retakeInactiveElement(GlobalKey key, Widget newWidget) {
    // The "inactivity" of the element being retaken here may be forward-looking: if
    // we are taking an element with a GlobalKey from an element that currently has
    // it as a child, then we know that element will soon no longer have that
    // element as a child. The only way that assumption could be false is if the
    // global key is being duplicated, and we'll try to track that using the
    // _debugTrackElementThatWillNeedToBeRebuiltDueToGlobalKeyShenanigans call below.
    final Element? element = key._currentElement;
    if (element == null)  return null;
    if (!Widget.canUpdate(element.widget, newWidget)) return null;
    final Element? parent = element._parent;
    if (parent != null) {
      parent.forgetChild(element);
      parent.deactivateChild(element);
    }
    owner!._inactiveElements.remove(element);
    return element;
  }

在此函数中，通过key的currentElement方法来获取注册在buildOwner中_globalKeyRegistry的element。

如果element不存在或者不可以使用的话就直接返回null，就不通过这个方法来获取了。

如果parent存在那么就切断此element与parent的联系，此时element的父级可能已经发生了改变，这个element可能是从_inactiveElements中取出来的。

最后从当前所有者_inactiveElements中移除此element，然后返回此element。

回到上一层函数中，判断_retakeInactiveElement返回的element是否存在。存在的话就接着执行_activateWithParent。

Element#_activateWithParent

void _activateWithParent(Element parent, Object? newSlot) {
  assert(_lifecycleState == _ElementLifecycle.inactive);
  _parent = parent;
  _updateDepth(_parent!.depth);
  _activateRecursively(this);
  attachRenderObject(newSlot);
  assert(_lifecycleState == _ElementLifecycle.active);
}

在函数中设置它的父级，更新它的深度，递归激活子级，附着RenderObject。

执行完后，回到上层代码中，通过updateChild更新此element，最后返回它。

因为是GlobalKey所以注册在owner中是可以找到的，所以在这里是复用操作。

其他非GlobalKey就通过createElement创建新的element并调用mout进行挂载。

StatefulElement中并没有重写这个方法，但是它的父类ComponentElement重写了。

ComponentElement#mout

@override
void mount(Element? parent, Object? newSlot) {
  super.mount(parent, newSlot);
  assert(_child == null);
  assert(_lifecycleState == _ElementLifecycle.active);
  _firstBuild();
  assert(_child != null);
}

它这里又调用了父级Element的mount。

Element#mount

@mustCallSuper
void mount(Element? parent, Object? newSlot) {
  _parent = parent;
  _slot = newSlot;
  _lifecycleState = _ElementLifecycle.active;
  _depth = _parent != null ? _parent!.depth + 1 : 1;
  if (parent != null) {
    // Only assign ownership if the parent is non-null. If parent is null
    // (the root node), the owner should have already been assigned.
    // See RootRenderObjectElement.assignOwner().
    _owner = parent.owner;
  }
  assert(owner != null);
  final Key? key = widget.key;
  if (key is GlobalKey) {
    owner!._registerGlobalKey(key, this);
  }
  _updateInheritance();
  attachNotificationTree();
}

在函数中就就是初始化 父类、插槽、生命周期、组件深度、所有者。

如果key是GlobalKey，就向owner的globalKey列表中注册该element。

调用_updateInheritance更新_inheritedElements：

void _updateInheritance() {
  assert(_lifecycleState == _ElementLifecycle.active);
  _inheritedElements = _parent?._inheritedElements;
}

调用attachNotificationTree更新_notificationTree：

@protected
void attachNotificationTree() {
  _notificationTree = _parent?._notificationTree;
}

Element#mount执行完后，继续执行_firstBuild， 然后执行rebuild。

void _firstBuild() {
  // StatefulElement overrides this to also call state.didChangeDependencies.
  rebuild(); // This eventually calls performRebuild.
}

至此mount方法就执行完了。

让我们回到 inflateWidget中。

返回当前的已经挂载好的element，让我们再回到updateChild中。

把这个已经挂载好的element赋值给当前element的_child中。

至此element.rebuild就完成了，总的来说可以知晓这是一个更新子child的操作。

让我们回到 13.1.buildOwner!.buildScope中继续执行。

在代码后又继续判断_dirtyElements列表，因为在构建的时候可能会出现新的dirty加入到列表，所以需要在这里一并进行更新。

等这些dirty列表更新完成后，清除dirty列表。

到这里buildScope的功能就完成了，主要是Widget与Element的构建

下面回到13.WidgetsBinding.drawFrame继续执行。

13.2.RendererBinding#drawFrame


此函数是绘制作用。

flushLayout：冲刷布局（Layout）

flushCompositingBits：冲刷合成位，是管线的一部分，在flushLayout与flushPaint之间

flushPaint：冲刷绘制（Paint）

compositeFrame：合成帧（渲染上图）

flushSemantics：冲刷语义化

PipelineOwner：管线所有者，是RenderBinding中的渲染树所有者，维护着一些dirty状态，随着RenderBinding初始化一起初始

renderView：PipelineOwner的rootNode，是渲染树的根，在RenderBinding中是作为RenderView类型，也随着RenderBinding初始化一起初始。

13.2.1.PipelineOwner#flushLayout

void flushLayout() {
  try {
    while (_nodesNeedingLayout.isNotEmpty) {
      final List<RenderObject> dirtyNodes = _nodesNeedingLayout;
      _nodesNeedingLayout = <RenderObject>[];
      dirtyNodes.sort((RenderObject a, RenderObject b) => a.depth - b.depth);
      for (int i = 0; i < dirtyNodes.length; i++) {
        if (_shouldMergeDirtyNodes) {
          _shouldMergeDirtyNodes = false;
          if (_nodesNeedingLayout.isNotEmpty) {
            _nodesNeedingLayout.addAll(dirtyNodes.getRange(i, dirtyNodes.length));
            break;
          }
        }
        final RenderObject node = dirtyNodes[i];
        if (node._needsLayout && node.owner == this) {
          node._layoutWithoutResize(); // 布局方法
        }
      }
      // No need to merge dirty nodes generated from processing the last
      // relayout boundary back.
      _shouldMergeDirtyNodes = false;
    }

    for (final PipelineOwner child in _children) {
      child.flushLayout();
    }

  } finally {
    _shouldMergeDirtyNodes = false;
  }
}

此函数主要是遍历需要重新布局的RenderObject列表（_nodesNeedingLayout）进行布局（一般是通过markNeedsLayout方法加入到此列表），布局后进行子级递归调用此方法。

RenderObject#_layoutWithoutResize

@pragma('vm:notify-debugger-on-exception')
void _layoutWithoutResize() {
  RenderObject? debugPreviousActiveLayout;
  try {
    performLayout();
    markNeedsSemanticsUpdate();
  } catch (e, stack) {...}
  _needsLayout = false;
  markNeedsPaint();
}

此函数中不进行大小的布局，因为只有在paint的时候才能确定大小，现在只是布局。

perfromLayout： 进行布局的计算，因为每个RenderObject的布局信息都不一样这里就不做特意讲解了

markNeedsSemanticsUpdate： 标记语义化更新并加入语义化更新列表中

markNeedsPaint： 标记此RenderObject 需要重绘

RenderObject#markNeedsPaint

void markNeedsPaint() {
  if (_needsPaint) return;
  _needsPaint = true;
  // If this was not previously a repaint boundary it will not have
  // a layer we can paint from.
  if (isRepaintBoundary && _wasRepaintBoundary) {
    // If we always have our own layer, then we can just repaint
    // ourselves without involving any other nodes.
    assert(_layerHandle.layer is OffsetLayer);
    if (owner != null) {
      owner!._nodesNeedingPaint.add(this);
      owner!.requestVisualUpdate();
    }
  } else if (parent is RenderObject) {
    final RenderObject parent = this.parent! as RenderObject;
    parent.markNeedsPaint();
    assert(parent == this.parent);
  } else {
    // If we are the root of the render tree and not a repaint boundary
    // then we have to paint ourselves, since nobody else can paint us.
    // We don't add ourselves to _nodesNeedingPaint in this case,
    // because the root is always told to paint regardless.
    //
    // Trees rooted at a RenderView do not go through this
    // code path because RenderViews are repaint boundaries.
    if (owner != null) {
      owner!.requestVisualUpdate();
    }
  }
}

在函数中标记此RenderObject是需要更新的。

如果重绘边界发生变化，那么会把当前renderObject添加到需要重绘的列表中并重新请求视觉（UI）更新，否则如果父级是RenderObject的话，那么父级也需要进行标记，因为某些父级的布局是依赖与子级的，所以这里是一个向上的递归，否则直接更新视觉。

至此flushLayout 结束，总的来说就是一个冲刷布局的方法。

13.2.2.PipelineOwner#flushCompositingBits

void flushCompositingBits() {
  _nodesNeedingCompositingBitsUpdate.sort((RenderObject a, RenderObject b) => a.depth - b.depth);

  for (final RenderObject node in _nodesNeedingCompositingBitsUpdate) {
    if (node._needsCompositingBitsUpdate && node.owner == this) {
      node._updateCompositingBits();
    }
  }

  _nodesNeedingCompositingBitsUpdate.clear();
  for (final PipelineOwner child in _children) {
    child.flushCompositingBits();
  }
}

此函数主要是更新需要合成位的列表。

RenderObject#_updateCompositingBits

void _updateCompositingBits() {
  if (!_needsCompositingBitsUpdate) return;
  final bool oldNeedsCompositing = _needsCompositing;
  _needsCompositing = false;
  visitChildren((RenderObject child) {
    child._updateCompositingBits();
    if (child.needsCompositing) {
      _needsCompositing = true;
    }
  });
  if (isRepaintBoundary || alwaysNeedsCompositing) {
    _needsCompositing = true;
  }
  // If a node was previously a repaint boundary, but no longer is one, then
  // regardless of its compositing state we need to find a new parent to
  // paint from. To do this, we mark it clean again so that the traversal
  // in markNeedsPaint is not short-circuited. It is removed from _nodesNeedingPaint
  // so that we do not attempt to paint from it after locating a parent.
  if (!isRepaintBoundary && _wasRepaintBoundary) {
    _needsPaint = false;
    _needsCompositedLayerUpdate = false;
    owner?._nodesNeedingPaint.remove(this);
    _needsCompositingBitsUpdate = false;
    markNeedsPaint();
  } else if (oldNeedsCompositing != _needsCompositing) {
    _needsCompositingBitsUpdate = false;
    markNeedsPaint();
  } else {
    _needsCompositingBitsUpdate = false;
  }
}

此函数主要是递归标记是否需要合成_needsCompositing，并且判断该**边界（图层）**是否有变化，有变化则加入到绘制列表中。

完成列表更新后清除该列表，然后再递归处理子级的合成位。

至此flushCompositingBits就结束了，总的来说就是标记是否需要合成，然后加入到需要重绘的列表中。

13.2.3.PipelineOwner#flushPaint

void flushPaint() {
  try {
    final List<RenderObject> dirtyNodes = _nodesNeedingPaint;
    _nodesNeedingPaint = <RenderObject>[];

    // Sort the dirty nodes in reverse order (deepest first).
    for (final RenderObject node in dirtyNodes..sort((RenderObject a, RenderObject b) => b.depth - a.depth)) {
      assert(node._layerHandle.layer != null);
      if ((node._needsPaint || node._needsCompositedLayerUpdate) && node.owner == this) {
        if (node._layerHandle.layer!.attached) {
          assert(node.isRepaintBoundary);
          if (node._needsPaint) {
            PaintingContext.repaintCompositedChild(node);
          } else {
            PaintingContext.updateLayerProperties(node);
          }
        } else {
          node._skippedPaintingOnLayer();
        }
      }
    }

    for (final PipelineOwner child in _children) {
      child.flushPaint();
    }

  } finally {...}
}

在函数中遍历了_nodesNeedingPaint列表并且在循环中判断了如果RenderObject的layer没有被附着（不存在 owner）那么就使用_skippedPaintingOnLayer跳过绘制，否则如果需要重绘就进行重绘，不需要重绘就进行layer属性的更新。

需要绘制的列表_nodesNeedingPaint一般通过markNeedingPaint或markNeedsCompositedLayerUpdate进行加入的。

需要重绘则用repaintCompositedChild。

PaintingContext#repaintCompositedChild

static void repaintCompositedChild(RenderObject child, { bool debugAlsoPaintedParent = false }) {
  assert(child._needsPaint);
  _repaintCompositedChild(
    child,
    debugAlsoPaintedParent: debugAlsoPaintedParent,
  );
}

PaintingContext#_repaintCompositedChild

static void _repaintCompositedChild(RenderObject child, {bool debugAlsoPaintedParent = false, PaintingContext? childContext })
{
  OffsetLayer? childLayer = child._layerHandle.layer as OffsetLayer?;
  if (childLayer == null) {
    // Not using the `layer` setter because the setter asserts that we not
    // replace the layer for repaint boundaries. That assertion does not
    // apply here because this is exactly the place designed to create a
    // layer for repaint boundaries.
    final OffsetLayer layer = child.updateCompositedLayer(oldLayer: null);
    child._layerHandle.layer = childLayer = layer;
  } else {
    Offset? debugOldOffset;
    childLayer.removeAllChildren();
    final OffsetLayer updatedLayer = child.updateCompositedLayer(oldLayer: childLayer);
  }
  child._needsCompositedLayerUpdate = false;
  childContext ??= PaintingContext(childLayer, child.paintBounds);
  child._paintWithContext(childContext, Offset.zero);
  // Double-check that the paint method did not replace the layer (the first
  // check is done in the [layer] setter itself).
  assert(identical(childLayer, child._layerHandle.layer));
  childContext.stopRecordingIfNeeded();
}

在函数中首先获取了RenderObject的layer，如果layer不存在就通过然后updateCompositedLayer方法进行更新一个，存在就把layer的children全部给移除掉，因为需要重新绘制了。

RenderObject#updateCompositedLayer

OffsetLayer updateCompositedLayer({required covariant OffsetLayer? oldLayer}) {
  assert(isRepaintBoundary);
  return oldLayer ?? OffsetLayer();
}

如果不存在笔画的上下文childContext，那么就通过layer与bounds生成一个。

然后通过_paintWithContext在指定的上下文中绘制。

RenderObject#_paintWithContext

void _paintWithContext(PaintingContext context, Offset offset) {
    // If we still need layout, then that means that we were skipped in the
    // layout phase and therefore don't need painting. We might not know that
    // yet (that is, our layer might not have been detached yet), because the
    // same node that skipped us in layout is above us in the tree (obviously)
    // and therefore may not have had a chance to paint yet (since the tree
    // paints in reverse order). In particular this will happen if they have
    // a different layer, because there's a repaint boundary between us.
    if (_needsLayout) return;
    RenderObject? debugLastActivePaint;
    _needsPaint = false;
    _needsCompositedLayerUpdate = false;
    _wasRepaintBoundary = isRepaintBoundary;
    try {
      paint(context, offset); // 调用绘制
      assert(!_needsLayout); // check that the paint() method didn't mark us dirty again
      assert(!_needsPaint); // check that the paint() method didn't mark us dirty again
    } catch (e, stack) {
      _reportException('paint', e, stack);
    }
  }

最终调用paint进行绘制。

绘制完后调用stopRecordingIfNeeded， 结束绘制并生成信息。

PaintingContext#stopRecordingIfNeeded

@protected
@mustCallSuper
void stopRecordingIfNeeded() {
  if (!_isRecording) return;
  _currentLayer!.picture = _recorder!.endRecording();
  _currentLayer = null;
  _recorder = null;
  _canvas = null;
}

此函数停止记录并生成Picture赋值给_currentLayer的picture，然后置空_currentLayer。

虽然把_currentLayer赋值为null了，但是这只是把PaintingContext的layer置为空，node的layer并没有受到影响，因为currentLayer已经加入到_containerLayer中了。

class PaintingContext extends ClipContext {
  PaintingContext(this._containerLayer, this.estimatedBounds);

  final ContainerLayer _containerLayer;

  final Rect estimatedBounds;

  @override
  Canvas get canvas {
    if (_canvas == null) {
      _startRecording();
    }
    assert(_currentLayer != null);
    return _canvas!;
  }

  ...
}

至此repaintCompositedChild方法就执行完了，总的来说就是绘制到layer上。

如果不需要重绘但是需要更新图层的属性，则用 updateLayerProperties。

PaintingContext#updateLayerProperties

static void updateLayerProperties(RenderObject child) {
  assert(child.isRepaintBoundary && child._wasRepaintBoundary);
  assert(!child._needsPaint);
  assert(child._layerHandle.layer != null);

  final OffsetLayer childLayer = child._layerHandle.layer! as OffsetLayer;
  Offset? debugOldOffset;
  final OffsetLayer updatedLayer = child.updateCompositedLayer(oldLayer: childLayer);
  assert(identical(updatedLayer, childLayer),
         '$child created a new layer instance $updatedLayer instead of reusing the '
         'existing layer $childLayer. See the documentation of RenderObject.updateCompositedLayer '
         'for more information on how to correctly implement this method.'
        );
  assert(debugOldOffset == updatedLayer.offset);

  child._needsCompositedLayerUpdate = false; // 修改标志
}

在函数中做了一系列的断言保证这个layer是原来的layer。

如果没有附着 layer 就使用_skippedPaintingOnLayer跳过。

RenderObject#_skippedPaintingOnLayer

void _skippedPaintingOnLayer() {
  assert(attached);
  assert(isRepaintBoundary);
  assert(_needsPaint || _needsCompositedLayerUpdate);
  assert(_layerHandle.layer != null);
  assert(!_layerHandle.layer!.attached);
  AbstractNode? node = parent;
  while (node is RenderObject) {
    if (node.isRepaintBoundary) {
      if (node._layerHandle.layer == null) {
        // Looks like the subtree here has never been painted. Let it handle itself.
        break;
      }
      if (node._layerHandle.layer!.attached) {
        // It's the one that detached us, so it's the one that will decide to repaint us.
        break;
      }
      node._needsPaint = true;
    }
    node = node.parent;
  }
}

最后处理完需要重绘的列表后，递归处理子级。

至此绘制阶段就结束，但是还没有放到 view 上。总的来说flushPaint就是绘制并保存picture到layer上。

13.2.4.RenderView#compositeFrame

void compositeFrame() {
  try {
    final ui.SceneBuilder builder = ui.SceneBuilder();
    final ui.Scene scene = layer!.buildScene(builder);
    if (automaticSystemUiAdjustment) {
      _updateSystemChrome();
    }
    _view.render(scene);
    scene.dispose();

  } finally {...}
}

在函数中主要是通过RenderObject的layer生成场景。

每个RenderObject都有一个layer，然后通过buildScene方法把layer上的绘制数据构建成Scene数据。

如果需要调整系统 UI 就调整一下（状态栏等），一般不会去动它了解就好。

然后通过render方法把layer生成的场景渲染上图，一般场景只用一次就丢弃掉，下一帧又会有新的场景绘制。

FlutterView

void render(Scene scene) => _render(scene);

@Native<Void Function(Pointer<Void>)>(symbol: 'PlatformConfigurationNativeApi::Render')
external static void _render(Scene scene);

_view：FlutteView类型，在安全的视图上进行渲染。

13.2.5.PipelineOwner#flushSemantics

void flushSemantics() {
  if (_semanticsOwner == null) return;
  try {
    final List<RenderObject> nodesToProcess = _nodesNeedingSemantics.toList()
      ..sort((RenderObject a, RenderObject b) => a.depth - b.depth);
    _nodesNeedingSemantics.clear();
    for (final RenderObject node in nodesToProcess) {
      if (node._needsSemanticsUpdate && node.owner == this) {
        node._updateSemantics();
      }
    }
    _semanticsOwner!.sendSemanticsUpdate();
    for (final PipelineOwner child in _children) {
      child.flushSemantics();
    }
  } finally {...}
}

此函数主要是进行一些语义化的渲染，这里就不多讲了。

到此super.drawFrame就结束了，总的来说就是渲染上图的功能

13.3.buildOwner#finalizeTree

@pragma('vm:notify-debugger-on-exception')
void finalizeTree() {
  try {
    lockState(_inactiveElements._unmountAll); // this unregisters the GlobalKeys
  } catch (e, stack) {...} finally {...}
}

此函数作为最后的绘制结尾阶段， 完成一些不使用的element的卸载，以及解绑key等操作。

_inactiveElements： 持有一些未激活的element的类

_inactiveElements._unmountAll：卸载全部的未激活的element

BuildOwner#lockState

void lockState(VoidCallback callback) {
  assert(_debugStateLockLevel >= 0);
  assert(() {
    _debugStateLockLevel += 1;
    return true;
  }());
  try {
    callback(); // 调用回调
  } finally {
    assert(() {
      _debugStateLockLevel -= 1;
      return true;
    }());
  }
  assert(_debugStateLockLevel >= 0);
}

该函数虽然只调用了回调，但是通过assert来确保在State.dispose中不能调用setState等element操作。

_InactiveElements#_unmountAll

void _unmountAll() {
  _locked = true;
  final List<Element> elements = _elements.toList()..sort(Element._sort);
  _elements.clear();
  try {
    elements.reversed.forEach(_unmount);
  } finally {
    assert(_elements.isEmpty);
    _locked = false;
  }
}

void _unmount(Element element) {
  assert(element._lifecycleState == _ElementLifecycle.inactive);
  assert(() {
    if (debugPrintGlobalKeyedWidgetLifecycle) {
      if (element.widget.key is GlobalKey) {
        debugPrint('Discarding $element from inactive elements list.');
      }
    }
    return true;
  }());
  element.visitChildren((Element child) {
    assert(child._parent == element);
    _unmount(child);
  });
  element.unmount();
  assert(element._lifecycleState == _ElementLifecycle.defunct);
}

StatefulElement#unmount

@override
void unmount() {
  super.unmount();
  state.dispose();
  state._element = null;
  // Release resources to reduce the severity of memory leaks caused by
  // defunct, but accidentally retained Elements.
  _state = null;
}

在函数中首先调用super.unmount（Element.unmount），来进行卸载。

Element#unmount

@mustCallSuper
void unmount() {
  assert(_lifecycleState == _ElementLifecycle.inactive);
  assert(_widget != null); // Use the private property to avoid a CastError during hot reload.
  assert(owner != null);
  if (kFlutterMemoryAllocationsEnabled) {
    MemoryAllocations.instance.dispatchObjectDisposed(object: this);
  }
  // Use the private property to avoid a CastError during hot reload.
  final Key? key = _widget?.key;
  if (key is GlobalKey) {
    owner!._unregisterGlobalKey(key, this);
  }
  // Release resources to reduce the severity of memory leaks caused by
  // defunct, but accidentally retained Elements.
  _widget = null;
  _dependencies = null;
  _lifecycleState = _ElementLifecycle.defunct;
}

在函数中如果有key是GlobalKey类型，那么就从所有者当中撤销掉，然后把一些必要的状态给清空。

回到上一层，主要是把state状态给销毁掉。

state.dispose：调用回调销毁

剩下的就置空。

至此buildOwner.finalizaTree就结束了，主要就是一些组件的卸载。

整个drawFrame阶段就完成了，然后我们回到 12._handlePersistentFrameCallback 方法中。

14.RendererBinding#_scheduleMouseTrackerUpdate

void _scheduleMouseTrackerUpdate() {
  SchedulerBinding.instance.addPostFrameCallback((Duration duration) {
    _mouseTracker!.updateAllDevices(renderView.hitTestMouseTrackers);
  });
}

此函数中往帧尾注册了一个 处理设备的回调，这个等我们处理到postFrameCallbacks阶段再来看。

目前为止在RendererBinding中注册的_handlePersistentFrameCallback 就执行完了。

其余的persistentCallbacks回调就自己了解吧。

总结：这个persistentCallbacks阶段主要就是构建以及渲染上图的过程。

紧接着回到第 11.handleDrawFrame步继续执行。

从persistentCallbacks进阶成postFrameCallbacks阶段。

调用postFrameCallbacks阶段所有注册的回调，回调完成后清空列表。

postFrameCallbacks阶段的回调列表基本都是对于一些已经刷新完后widget的操作，比如说获取更新后 widget 大小或设置一些 setState 刷新操作等，这个有很多widget都用到了，这里就不一一做讲解了，目前就讲述 刚刚所说的 处理设备的回调。

_mouseTracker：鼠标跟踪器，随着RendererBinding初始化进行初始

RendererBinding#initMouseTracker

@visibleForTesting
void initMouseTracker([MouseTracker? tracker]) {
  _mouseTracker?.dispose();
  _mouseTracker = tracker ?? MouseTracker();
}

_mouseTracker!.updateAllDevices(renderView.hitTestMouseTrackers)：更新鼠标设备

renderView.hitTestMouseTrackers： 通过position来确定命中的HitTestEntry并返回HitTestResult

RenderView

HitTestResult hitTestMouseTrackers(Offset position) {
  final BoxHitTestResult result = BoxHitTestResult();
  hitTest(result, position: position);
  return result;
}

bool hitTest(HitTestResult result, { required Offset position }) {
  if (child != null) {
    child!.hitTest(BoxHitTestResult.wrap(result), position: position);
  }
  result.add(HitTestEntry(this));
  return true;
}

14.1.MouseTracker#updateAllDevices

void updateAllDevices(MouseDetectorAnnotationFinder hitTest) {
  _deviceUpdatePhase(() {
    for (final _MouseState dirtyState in _mouseStates.values) {
      final PointerEvent lastEvent = dirtyState.latestEvent;
      final LinkedHashMap<MouseTrackerAnnotation, Matrix4> nextAnnotations = _findAnnotations(dirtyState, hitTest);
      final LinkedHashMap<MouseTrackerAnnotation, Matrix4> lastAnnotations = dirtyState.replaceAnnotations(nextAnnotations);

      _handleDeviceUpdate(_MouseTrackerUpdateDetails.byNewFrame(
        lastAnnotations: lastAnnotations,
        nextAnnotations: nextAnnotations,
        previousEvent: lastEvent,
      ));
    }
  });
}

此函数中首先使用了_deviceUpdatePhase方法保证在执行设备更新时必须是在设备更新阶段。

14.1.1.MouseTracker#_deviceUpdatePhase

void _deviceUpdatePhase(VoidCallback task) {
  assert(!_debugDuringDeviceUpdate);
  assert(() {
    _debugDuringDeviceUpdate = true;
    return true;
  }());
  task();
  assert(() {
    _debugDuringDeviceUpdate = false;
    return true;
  }());
}

断言当前的阶段是设备更新阶段才可以触发。

回到上一层。

遍历_mouseStates中的状态并处理。

_mouseStates： 跟踪鼠标的状态的键值对，键是设备 id，值是状态，比如hover、add等。

然后通过_findAnnotations来获取在此位置上所有命中的MouseTrackerAnnotation类。

14.1.2.MouseTracker#_findAnnotations

LinkedHashMap<MouseTrackerAnnotation, Matrix4> _findAnnotations(_MouseState state, MouseDetectorAnnotationFinder hitTest) {
  final Offset globalPosition = state.latestEvent.position;
  final int device = state.device;
  if (!_mouseStates.containsKey(device)) {
    return LinkedHashMap<MouseTrackerAnnotation, Matrix4>();
  }

  return _hitTestResultToAnnotations(hitTest(globalPosition));
}

如果这个设备号并没有加入到鼠标状态中，那就直接返回。

否则就通过hitTest方法获取到hitTestResult后将其转换成 annotations。

_hitTestResultToAnnotation：把HitTestResult转换成注释列表

MouseTracker#_hitTestResultToAnnotationÏ

LinkedHashMap<MouseTrackerAnnotation, Matrix4> _hitTestResultToAnnotations(HitTestResult result) {
  final LinkedHashMap<MouseTrackerAnnotation, Matrix4> annotations = LinkedHashMap<MouseTrackerAnnotation, Matrix4>();
  for (final HitTestEntry entry in result.path) {
    final Object target = entry.target;
    if (target is MouseTrackerAnnotation) {
      annotations[target] = entry.transform!;
    }
  }
  return annotations;
}

此函数中给每个目标的进行了判断，如果命中目标的类型是MouseTrackerAnnotation，那么就以key为命中目标，value为目标位置，加入到注解 map 中。

等所有命中的目标处理完后就返回annotations。

然后通过 dirtyState.replaceAnnotations 方法把旧的annotations给替换掉。

14.1.3._MouseState#replaceAnnotations

LinkedHashMap<MouseTrackerAnnotation, Matrix4> replaceAnnotations(LinkedHashMap<MouseTrackerAnnotation, Matrix4> value) {
  final LinkedHashMap<MouseTrackerAnnotation, Matrix4> previous = _annotations;
  _annotations = value;
  return previous;
}

在函数中用新annotations替换旧annotations，返回旧annotations。

然后调用_MouseTrackerUpdateDetails.byNewFrame生成一个新的_MouseTrackerUpdateDetails。

@immutable
class _MouseTrackerUpdateDetails with Diagnosticable {
  /// When device update is triggered by a new frame.
  ///
  /// All parameters are required.
  const _MouseTrackerUpdateDetails.byNewFrame({
    required this.lastAnnotations,
    required this.nextAnnotations,
    required PointerEvent this.previousEvent,
  }) : triggeringEvent = null;
  ...
}

然后传递给传递给_handleDeviceUpdate。

14.1.4.MouseTracker#_handleDeviceUpdate

void _handleDeviceUpdate(_MouseTrackerUpdateDetails details) {
  assert(_debugDuringDeviceUpdate);
  _handleDeviceUpdateMouseEvents(details);
  _mouseCursorMixin.handleDeviceCursorUpdate(
    details.device,
    details.triggeringEvent,
    details.nextAnnotations.keys.map((MouseTrackerAnnotation annotation) => annotation.cursor),
  );
}

14.1.4.1._handleDeviceUpdateMouseEvents

static void _handleDeviceUpdateMouseEvents(_MouseTrackerUpdateDetails details) {
  final PointerEvent latestEvent = details.latestEvent;

  final LinkedHashMap<MouseTrackerAnnotation, Matrix4> lastAnnotations = details.lastAnnotations;
  final LinkedHashMap<MouseTrackerAnnotation, Matrix4> nextAnnotations = details.nextAnnotations;

  // Order is important for mouse event callbacks. The
  // `_hitTestResultToAnnotations` returns annotations in the visual order
  // from front to back, called the "hit-test order". The algorithm here is
  // explained in https://github.com/flutter/flutter/issues/41420

  // Send exit events to annotations that are in last but not in next, in
  // hit-test order.
  final PointerExitEvent baseExitEvent = PointerExitEvent.fromMouseEvent(latestEvent);
  lastAnnotations.forEach((MouseTrackerAnnotation annotation, Matrix4 transform) {
    if (!nextAnnotations.containsKey(annotation)) {
      if (annotation.validForMouseTracker && annotation.onExit != null) {
        // 触发onExit事件
        annotation.onExit!(baseExitEvent.transformed(lastAnnotations[annotation]));
      }
    }
  });

  // Send enter events to annotations that are not in last but in next, in
  // reverse hit-test order.
  final List<MouseTrackerAnnotation> enteringAnnotations = nextAnnotations.keys.where(
    (MouseTrackerAnnotation annotation) => !lastAnnotations.containsKey(annotation),
  ).toList();
  final PointerEnterEvent baseEnterEvent = PointerEnterEvent.fromMouseEvent(latestEvent);
  for (final MouseTrackerAnnotation annotation in enteringAnnotations.reversed) {
    if (annotation.validForMouseTracker && annotation.onEnter != null) {
      // 触发onEnter事件
      annotation.onEnter!(baseEnterEvent.transformed(nextAnnotations[annotation]));
    }
  }
}

在函数中做一些 命中目标MouseTrackerAnnotation上的事件，一般就是onExit/onEnter事件，然后回调给用户。

一般命中的目标是RenderMouseRegion，它实现MouseTrackerAnnotation，间接继承RenderBox， 使用这个RenderObject的widget是MouseRegion

回到上一层。

14.1.4.2.MouseCursorManager#handleDeviceCursorUpdate

void handleDeviceCursorUpdate(
  int device,
  PointerEvent? triggeringEvent,
  Iterable<MouseCursor> cursorCandidates,
) {
  if (triggeringEvent is PointerRemovedEvent) {
    _lastSession.remove(device);
    return;
  }

  final MouseCursorSession? lastSession = _lastSession[device];
  final MouseCursor nextCursor = _DeferringMouseCursor.firstNonDeferred(cursorCandidates)
    ?? fallbackMouseCursor;

  assert(nextCursor is! _DeferringMouseCursor);

  if (lastSession?.cursor == nextCursor) return;

  final MouseCursorSession nextSession = nextCursor.createSession(device);
  _lastSession[device] = nextSession;

  lastSession?.dispose();
  nextSession.activate();
}

此函数就做一些鼠标光标的操作。

鼠标光标移出程序时移除此鼠标设备。

当鼠标光标发生变化，比如说鼠标移动到按钮上的时候改变，就把之前的鼠标样式dispose，然后激活新的鼠标样式。

至此鼠标设备等操作就结束了。

紧接着回到第11.handleDrawFrame继续执行。

_postFrameCallbacks回调执行完成后就清除回调，最后从postFrameCallbacks变为idle阶段，至此一帧的流程就此结束。

这就是Flutter在一帧当中处理的全部内容。

总结

在生成帧期间发生的各个阶段。总的来说，这些阶段包括：

1. 动画阶段：该阶段调用所有已注册的短暂帧回调函数（通过 scheduleFrameCallback 注册），并按照注册顺序执行。这包括所有正在驱动 AnimationController 的 Ticker 实例，这意味着此时所有活动的 Animation 对象都在运行。
2. 微任务阶段：在 handleBeginFrame 返回后，任何由短暂帧回调函数调度的微任务都会运行。这通常包括来自 Ticker 和 AnimationController 的 Future 的回调函数，这些 Future 已在此帧内完成。
3. 构建阶段：重建所有在小部件树中标记为脏的 Element（参见 State#build）。有关将小部件标记为需要重建的更多信息，请参见 State#setState。有关此步骤的更多信息，请参见 BuildOwner。
4. 布局阶段：对系统中所有标记为脏的 RenderObject 进行布局（参见 RenderObject#performLayout）。有关将对象标记为需要布局的更多信息，请参见 RenderObject#markNeedsLayout。
5. 合成位阶段：更新任何脏的 RenderObject 对象上的合成位。参见 RenderObject#markNeedsCompositingBitsUpdate。
6. 绘制阶段：重绘系统中所有标记为脏的 RenderObject（参见 RenderObject.paint）。这将生成 Layer 树。有关将对象标记为需要绘制的更多信息，请参见 RenderObject#markNeedsPaint。
7. 合成阶段：将图层树转换为 Scene 并发送到 GPU。
8. 语义阶段：更新系统中所有标记为脏的 RenderObject 的语义（参见 RenderObject#assembleSemanticsNode）。这将生成 SemanticsNode 树。有关将对象标记为需要语义更新的更多信息，请参见 RenderObject#markNeedsSemanticsUpdate。
9. 小部件层的最终化阶段：小部件树最终化。这会导致在此帧中从小部件树中删除的任何对象上调用 State#dispose。有关更多详细信息，请参见 BuildOwner#finalizeTree。
10. 调度层中的最终化阶段：在 drawFrame() 返回后，handleDrawFrame() 调用后帧回调函数（通过 addPostFrameCallback 注册）。

加油吧，骚年!