Flutter中StatefulWidget重建时如何保留旧状态迁移用户已输入内容

问题核心原因 #

你遇到的表单内容清空问题由两类常见原因导致：

1. 组件未设置稳定的Key，当fields更新时，Flutter会直接销毁旧的State实例、创建全新实例，原有状态直接丢失
2. 未实现Widget配置更新后的状态同步逻辑

解决方案 #

步骤1：给组件添加稳定Key，保证State实例复用

首先修改MultiFieldForm的构造函数，增加Key参数，使用时传入稳定的唯一标识，只要Key不变，Flutter就不会销毁State实例，只会触发更新回调：

class MultiFieldForm extends StatefulWidget {
  /// 构造函数，必须传入key保证实例复用
  const MultiFieldForm(this.fields, {super.key});

  /// 字段列表
  final List<Field> fields;

  @override
  _MultiFieldFormState createState() => _MultiFieldFormState();
}

注意：你示例代码中createState返回值存在笔误，需要返回_MultiFieldFormState而非_MultiFieldForm，否则会运行报错。

使用时传入稳定Key：

// 只要表单业务身份不变，Key就不变
MultiFieldForm(
  key: const ValueKey('user_profile_form'),
  fields: newFieldList,
)

步骤2：重写didUpdateWidget实现状态同步

State实例复用的前提下，didUpdateWidget回调中当前State持有的filledFields、collapsedFields就是旧状态数据，入参oldWidget是旧的组件配置，widget是新的组件配置，直接在该方法中做状态迁移即可：

import 'package:flutter/foundation.dart';

class _MultiFieldFormState extends State<MultiFieldForm> {
  _MultiFieldFormState();

  // 注意：建议将key改为字段的唯一标识（比如id），不要用Field实例作为key
  // 因为新传入的fields列表中的Field都是新实例，实例匹配会失效
  Map<String, String> filledFields = {};
  List<String> collapsedFieldIds = [];

  @override
  void didUpdateWidget(covariant MultiFieldForm oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 字段列表无变化直接返回
    if (listEquals(oldWidget.fields, widget.fields)) return;

    // 同步已填写内容：保留仍存在的字段的用户输入
    final newFilledFields = <String, String>{};
    for (final newField in widget.fields) {
      // 按业务唯一标识匹配旧字段，假设Field类有id属性作为唯一标识
      if (filledFields.containsKey(newField.id)) {
        newFilledFields[newField.id] = filledFields[newField.id]!;
      }
    }
    filledFields = newFilledFields;

    // 同步折叠状态
    final newCollapsedIds = <String>[];
    for (final newField in widget.fields) {
      if (collapsedFieldIds.contains(newField.id)) {
        newCollapsedIds.add(newField.id);
      }
    }
    collapsedFieldIds = newCollapsedIds;

    // 可选：需要立即刷新UI的话调用setState
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    // 渲染逻辑直接使用最新的filledFields、widget.fields即可
  }
}

特殊场景兼容 #

如果你的业务场景必须变更组件Key（比如同一个位置切换不同业务类型的表单），则需要将表单状态提升到父组件或者使用全局状态管理（如Provider、Bloc）存储filledFields、折叠状态，MultiFieldForm只负责渲染和事件回调，这样无论组件是否重建，数据都存在上层不会丢失。

内容的提问来源于stack exchange，提问作者Wheat Wizard