Flutter中setState调用build的内部原理及源码链路查询

你已经梳理了前半段流程，接下来的核心环节是Flutter的帧调度触发构建，以及Element层级的重建逻辑，具体如下：

后续关键步骤 #

• 当脏元素列表非空时，Flutter的帧循环会触发WidgetsBinding的handleDrawFrame方法。这是Flutter处理每帧绘制前的核心入口，会调用BuildOwner的buildScope来批量处理所有脏元素。
• 在BuildOwner的buildScope中，会遍历脏元素列表，逐个调用element的rebuild方法。
• 对应StatefulWidget的StatefulElement，它的rebuild会触发performRebuild方法。在这个方法里，会直接调用关联State的build()方法，拿到新的Widget后更新element树。

对应源码片段 #

1. WidgetsBinding.handleDrawFrame 触发构建流程 #

在widgets/binding.dart中：

@override
void handleDrawFrame() {
  try {
    // 优先处理脏元素的构建工作
    _buildOwner!.buildScope(_renderViewElement, () {
      _renderViewElement.rebuild();
    });
    // 后续执行绘制、合成等帧循环逻辑
  } finally {
    // 构建完成后的清理工作
  }
}

2. BuildOwner.buildScope 遍历并处理脏元素 #

在widgets/framework.dart中：

void buildScope(Element context, VoidCallback callback) {
  _debugBuilding = true;
  try {
    // 循环处理脏元素，直到列表为空
    while (_dirtyElements.isNotEmpty) {
      final List<Element> dirtyElements = _dirtyElements.toList()..sort();
      _dirtyElements.clear();
      for (final Element element in dirtyElements) {
        if (!element._active) continue;
        element.rebuild();
      }
      callback();
    }
  } finally {
    _debugBuilding = false;
  }
}

3. StatefulElement.performRebuild 调用State的build方法 #

在widgets/framework.dart中：

@override
void performRebuild() {
  // 前置状态检查与更新逻辑
  Widget? built;
  try {
    // 直接调用关联State的build方法
    built = build();
  } catch (e, stack) {
    // 构建异常捕获与处理
  }
  // 将新构建的Widget更新到element树中
  try {
    updateChild(_child, built, slot);
  } catch (e, stack) {
    // 更新异常捕获与处理
  }
  // 后续状态同步逻辑
}

// StatefulElement的build方法直接返回state.build()
@override
Widget build() => state.build();

至此，完整调用链为：setState → _element.markNeedsBuild() → owner.scheduleBuildFor(this) → 元素加入脏列表 → 帧循环触发handleDrawFrame → buildScope遍历脏元素 → element.rebuild() → performRebuild → state.build()

内容的提问来源于stack exchange，提问作者无夜之星辰