Flutter列表变更时TextField输入值丢失问题求助

1. 错误的状态存储位置：直接在StatefulWidget的成员变量中存储列表list，但Flutter中Widget是不可变对象，修改它的成员会导致状态管理混乱，正确做法是将可变状态放在对应的State类内部。
2. StatelessWidget无法保存状态：Thing是StatelessWidget，每次父组件触发重建时，Thing会被重新实例化，内部的TextEditingController也会被重新创建，导致之前的输入内容丢失。
3. Widget复用逻辑异常：虽然使用了ValueKey，但由于状态没有正确保存，删除元素后Widget树重建时，后续的TextField会被错误地重新关联到新的控制器，导致内容清空。

方案一：让Thing成为StatefulWidget，自行维护输入状态 #

适合每个TextField状态独立管理的场景：

class Experiment extends StatefulWidget {
  const Experiment({super.key});

  @override
  State<Experiment> createState() => _ExperimentState();
}

class _ExperimentState extends State<Experiment> {
  // 将可变列表移到State内部管理
  final List<String> list = ["a", "b", "c", "d", "e", "f", "g"];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: List.generate(list.length, (index) {
        final elem = list[index];
        return Row(
          children: [
            SizedBox(
              width: 100,
              // 用唯一的元素值作为Key，确保Widget复用逻辑正确
              child: Thing(key: ValueKey(elem)),
            ),
            SizedBox(
              width: 100,
              child: MaterialButton(
                child: const Text("delete"),
                onPressed: () {
                  setState(() {
                    list.removeAt(index);
                  });
                },
              ),
            ),
          ],
        );
      }),
    );
  }
}

// 改为StatefulWidget，保存输入控制器的状态
class Thing extends StatefulWidget {
  const Thing({super.key});

  @override
  State<Thing> createState() => _ThingState();
}

class _ThingState extends State<Thing> {
  late final TextEditingController textEditingController;

  @override
  void initState() {
    super.initState();
    // 仅在初始化时创建控制器，避免重复创建
    textEditingController = TextEditingController();
  }

  @override
  void dispose() {
    // 销毁控制器，避免内存泄漏
    textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: textEditingController,
    );
  }
}

方案二：父组件统一管理所有TextField的控制器 #

适合需要统一获取或处理所有输入内容的场景：

class Experiment extends StatefulWidget {
  const Experiment({super.key});

  @override
  State<Experiment> createState() => _ExperimentState();
}

class _ExperimentState extends State<Experiment> {
  final List<String> list = ["a", "b", "c", "d", "e", "f", "g"];
  // 用Map绑定元素与对应的输入控制器
  final Map<String, TextEditingController> _controllers = {};

  @override
  void initState() {
    super.initState();
    // 初始化时为每个元素创建控制器
    for (final elem in list) {
      _controllers[elem] = TextEditingController();
    }
  }

  @override
  void dispose() {
    // 统一销毁所有控制器
    for (final controller in _controllers.values) {
      controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: List.generate(list.length, (index) {
        final elem = list[index];
        return Row(
          children: [
            SizedBox(
              width: 100,
              child: TextField(
                key: ValueKey(elem),
                controller: _controllers[elem],
              ),
            ),
            SizedBox(
              width: 100,
              child: MaterialButton(
                child: const Text("delete"),
                onPressed: () {
                  setState(() {
                    // 删除元素时同步销毁对应的控制器
                    _controllers.remove(elem)?.dispose();
                    list.removeAt(index);
                  });
                },
              ),
            ),
          ],
        );
      }),
    );
  }
}

• 状态存储修正：将可变列表移到State类内部，符合Flutter不可变Widget的设计原则，确保状态修改能正确触发UI重建。
• 控制器持久化：无论是让子组件自行维护控制器，还是父组件统一管理，都避免了每次build时重新创建控制器，从而保留输入内容。
• 唯一Key的作用：ValueKey(elem)为每个TextField提供唯一标识，Flutter在Widget树重建时能正确识别哪些Widget需要复用，哪些需要销毁，避免错误地重置输入内容。
• 内存泄漏防护：在组件销毁时调用dispose()方法销毁TextEditingController，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Justin Thyme