调用SetState时如何避免重复添加Widget？

核心问题出在UI构建逻辑中直接修改状态列表：你在buildTable的List.generate循环里执行registrationList.add()、totalFields.add()等操作，而Flutter的build方法（包括buildTable这类依赖build执行的方法）会被频繁触发（比如setState、屏幕旋转、父组件重建等），每次触发都会重复执行添加操作，导致列表不断累积重复数据。

要避免重复添加，必须将数据初始化/更新的逻辑从UI渲染流程中剥离，只在数据真正变化时更新状态，而非每次build都执行添加操作。

1. 重构数据存储结构 #

把原有的列表改为以项目ID为Key的映射，这样可以精准关联每个项目的控制器和数据，避免索引错位和重复添加：

// 替换原有List，用项目ID关联控制器与总时长
Map<String, List<TextEditingController>> registrationControllers = {};
Map<String, double> projectTotalFields = {};
Map<String, List<TextEditingController>> descriptionControllers = {};

2. 在数据加载阶段初始化控制器 #

在StreamBuilder获取到Firebase数据时，初始化或更新控制器，而非在UI构建时操作：

if (snapshot.hasData) {
  for (var object in snapshot.data!.docs) {
    Project project = Project.fromQueryDocumentSnapshot(object);
    projectMap[object.id] = project;
    
    // 仅当项目未创建控制器时才初始化，避免重复添加
    if (!registrationControllers.containsKey(object.id)) {
      // 为每个项目创建7个控制器（对应7列日期）
      registrationControllers[object.id] = List.generate(7, (_) => TextEditingController());
      descriptionControllers[object.id] = List.generate(7, (_) => TextEditingController());
      projectTotalFields[object.id] = 0.0;
    }
  }
  projectMap.removeWhere((key, value) => compareEndDate(value!));
  
  // 移除已删除项目的控制器，防止内存泄漏
  List<String> existingProjectIds = projectMap.keys.toList();
  registrationControllers.removeWhere((key, _) => !existingProjectIds.contains(key));
  descriptionControllers.removeWhere((key, _) => !existingProjectIds.contains(key));
  projectTotalFields.removeWhere((key, _) => !existingProjectIds.contains(key));
}

3. 修改UI构建时的数据获取逻辑 #

在buildTable中，不再执行添加操作，而是通过项目ID直接获取对应的控制器：

// 替换原有的add逻辑，改为通过项目ID获取控制器
else if (rowIndex > 2 && rowIndex < outerRange - 1 && columnIndex < 8) {
  String projectId = projectMap.keys.elementAt(rowIndex - 3);
  List<TextEditingController> regControllers = registrationControllers[projectId]!;
  List<TextEditingController> descControllers = descriptionControllers[projectId]!;
  
  // 更新当前项目的总时长
  projectTotalFields[projectId] = double.parse(calculateTotalHours(projectId));
  
  return TableCell(
    verticalAlignment: TableCellVerticalAlignment.middle,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 传入对应列的控制器
        buildRegistrationWidget(rowIndex - 3, columnIndex - 1, regControllers[columnIndex - 1]),
        const Divider(thickness: 1, color: gridColor),
      ],
    ),
  );
}

4. 优化总时长计算逻辑 #

基于项目ID更新总时长，避免索引错位：

String calculateTotalHours(String projectId) {
  List<TextEditingController> controllers = registrationControllers[projectId]!;
  double total = controllers.fold(0.0, (sum, controller) {
    return sum + (double.tryParse(controller.text) ?? 0.0);
  });
  return total.toString();
}

5. 内存清理：销毁页面时释放控制器 #

在State的dispose方法中释放所有控制器，防止内存泄漏：

@override
void dispose() {
  // 遍历所有控制器并释放
  registrationControllers.values.forEach((controllers) {
    controllers.forEach((controller) => controller.dispose());
  });
  descriptionControllers.values.forEach((controllers) {
    controllers.forEach((controller) => controller.dispose());
  });
  super.dispose();
}

• 禁止在build方法中修改状态：build是纯UI渲染逻辑，会被频繁调用，修改状态会导致无限循环或数据重复。
• 数据与UI分离：状态数据的初始化、更新应放在数据加载（如StreamSnapshot处理）或用户交互逻辑中，UI仅负责基于现有数据渲染。
• 用映射关联数据：以项目ID为Key存储控制器和业务数据，比单纯列表更安全，避免索引错位和重复添加问题。

内容的提问来源于stack exchange，提问作者Henrik Thystrup