Flutter Widget重建机制及相同Key下子组件状态更新疑问

一、Widget重建的核心依据 #

Flutter的Widget重建核心是匹配Element节点，匹配的判断标准是Widget运行时类型 + Key：

• Widget本质只是不可变的配置信息，真正维护状态、衔接渲染逻辑的是Element。每次build生成新Widget树后，Flutter会对比新旧Widget，找到对应的Element节点。
• 只有当新旧Widget的类型完全一致，且Key相同（如果设置了Key），Flutter才会复用已有Element，调用Element的update方法将新Widget的配置同步过去，进而更新渲染结果。
• 若类型不匹配，或Key不一致，旧Element会被销毁，同时创建新的Element及对应的RenderObject。

二、相同Key但子组件状态变化的情况 #

官方文档明确说明：

The new Widget is considered to correspond to an existing Element if it has the same Type and Key.

但这并不代表子组件不会更新。你的例子中，loadingStudent和loadedStudents返回的ListView.separated类型与Key都一致，所以ListView对应的Element会被复用，但：

• ListView的itemBuilder返回的StudentCard参数发生了变化（isLoading从true变为false、currentlyMarkedStudentId改变、absenteeList更新），Flutter会递归对比每个子Widget的配置。
• 对于StudentCard来说，只要它的配置参数变化，即使父ListView的Element被复用，子Element也会触发update流程，更新组件状态，因此你会看到子组件的UI变化。

三、带Key与不带Key的重建差异 #

不带Key的场景 #

• Flutter仅通过Widget类型匹配Element。在列表这类动态场景中，如果列表项的顺序或数据发生变化，Flutter会把旧位置的Element直接绑定到新位置的Widget上，导致状态错位——比如列表项的选中状态会跟着位置移动，而非对应的数据。
• 父Widget重建时，只要子Widget类型相同，就直接复用Element，不会关心数据是否对应。

带Key的场景 #

• Key作为Element的唯一标识，Flutter会通过类型+Key精准匹配Element。在列表场景中，Key能让Element和对应的数据源绑定，当列表项顺序变化时，Element会跟着数据移动，保证状态与数据对应。
• 当Key一致但Widget配置变化时，Element会被复用，同时将新Widget的配置同步到Element中，触发子组件的更新（就像你的例子中，ListView的Key不变，但内部参数变化，子组件依然会更新）。

代码示例 #

Widget loadingStudent(List<int> absenteesList, int studentId) {
    return ListView.separated(
        key: someConstGlobalKey,
        addAutomaticKeepAlives: true,
        separatorBuilder: (context, index) {
          return Divider();
        },
        itemCount: studentsList.length,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) {
          return StudentCard(
            studentObject: studentsList[index],
            classAttendanceDetails: classAttendanceDetails,
            isLocked: widget.isLocked,
            course: course,
            studentId: studentsList[index].id,
            index: index,
            studentsList: studentsList,
            absenteeList: absenteesList,
            isAbsent: isAbsent(studentsList[index].id, absenteesList),
            currentlyMarkedStudentId: studentId,
            isLoading: true,
          );
        });
  }

  Widget loadedStudents(List<int> absenteesList) {
    return ListView.separated(
        key: someConstGlobalKey,
        separatorBuilder: (context, index) {
          return Divider();
        },
        itemCount: studentsList.length,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) {
          return StudentCard(
            studentObject: studentsList[index],
            classAttendanceDetails: classAttendanceDetails,
            isLocked: widget.isLocked,
            course: course,
            studentId: studentsList[index].id,
            index: index,
            studentsList: studentsList,
            absenteeList: absenteesList,
            isAbsent: isAbsent(studentsList[index].id, absenteesList),
            currentlyMarkedStudentId: -1,
            isLoading: false,
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    var bloc = BlocProvider.of<MarkAttendanceBloc>(context);
    bloc.add(InitialEvent(
        absenteeList: classAttendanceDetails.absentees,
        studentsList: studentsList,
        course: course));
    return BlocBuilder<MarkAttendanceBloc, MarkAttendanceState>(
        builder: (BuildContext context, MarkAttendanceState state) {
      var nextView;

      state.when(
        loadingStudent: (int? presentCount, int absentCount,
            List<int> absenteesList, int studentId) {
          nextView = loadingStudent(absenteesList, studentId);
        },
        loaded: (int presentCount, int absentCount, bool localOperation,
            List<int> absenteesList) {
          nextView = loadedStudents(absenteesList);
        },
        error: (int? presentCount, int? absentCount, String errorMessage) {
          nextView = Text(errorMessage);
        },
        loading: (
          int? presentCount,
          int? absentCount,
        ) {
          nextView = CircularProgressIndicator();
        },
      );
      return nextView;
    });
  }

内容的提问来源于stack exchange，提问作者Shashank Jain