Flutter状态保持未达预期：PageView页面状态丢失问题排查

我用PageView实现多页面表单，每个页面包含TextField，需要在submit()时收集所有页面数据，所以给ThePageState混入了AutomaticKeepAliveClientMixin并将wantKeepAlive设为true。但编辑X页面的TextField后切换到Y页面，再转移焦点时，X页面的状态丢失，无法获取其TextEditingController的值。我不想在父组件TheScreenState中定义所有TextEditingController，请问问题出在哪里？

错误原因分析 #

问题核心出在TextEditingController的定义位置和StatefulWidget的重建机制：

1. 控制器定义在StatefulWidget类中：StatefulWidget是不可变对象，当父组件TheScreenState的build方法重新执行（比如焦点变化触发的重建），ThePage的实例会被重新创建，导致原来的tecA/tecB/tecC被新的控制器实例替换，之前输入的内容全部丢失。
2. GlobalKey使用逻辑错误：父组件build时直接创建ThePage实例并传入GlobalKey，但Widget层面的控制器已被重置，即便GlobalKey关联到旧State，也无法保留原有输入数据。

修复方案 #

将TextEditingController从ThePage（StatefulWidget）移到ThePageState中，利用State对象的生命周期特性（配合AutomaticKeepAliveClientMixin）保留控制器状态，同时调整数据初始化和获取逻辑。

修改后的完整代码 #

1. 调整ThePage和ThePageState

class ThePage extends StatefulWidget{
  final Map data;

  // 移除Widget中的控制器，仅传递必要数据
  const ThePage(this.data, {super.key});

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

class ThePageState extends State<ThePage> with AutomaticKeepAliveClientMixin<ThePage>{
  // 控制器移到State中，保证状态不丢失
  late TextEditingController tecA;
  late TextEditingController tecB;
  late TextEditingController tecC;

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    // 初始化控制器并填充初始数据
    tecA = TextEditingController(text: widget.data['A']);
    tecB = TextEditingController(text: widget.data['B']);
    tecC = TextEditingController(text: widget.data['C']);
  }

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

  @override
  void didUpdateWidget(covariant ThePage oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 父组件数据更新时同步控制器内容
    if (oldWidget.data != widget.data) {
      tecA.text = widget.data['A'];
      tecB.text = widget.data['B'];
      tecC.text = widget.data['C'];
    }
  }

  @override
  Widget build(BuildContext context) {
    // AutomaticKeepAliveClientMixin要求必须调用super.build
    super.build(context);
    return Column(
      children: [
        TextField(controller: tecA),
        TextField(controller: tecB),
        TextField(controller: tecC),
      ],
    );
  }

  Map get data => {
    'A' : tecA.text,
    'B' : tecB.text,
    'C' : tecC.text
  };
}

2. 调整TheScreenState

class TheScreen extends StatefulWidget{
  final Map data;

  const TheScreen(this.data);

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

class TheScreenState extends State<TheScreen>{
  final GlobalKey<ThePageState> keyX = GlobalKey<ThePageState>();
  final GlobalKey<ThePageState> keyY = GlobalKey<ThePageState>();
  final PageController controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: controller,
        children: [
          ThePage(widget.data['X'], key: keyX),
          ThePage(widget.data['Y'], key: keyY),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: submit,
        child: const Icon(Icons.save),
      ),
    );
  }

  Future<void> submit() async{
    final Map map = {
      'X' : keyX.currentState?.data,
      'Y' : keyY.currentState?.data,
    };
    if (!mounted) return;
    Navigator.of(context).pop(map);
  }
}

关键说明 #

• State对象在Widget重建时会被Flutter框架保留（配合AutomaticKeepAliveClientMixin），控制器放在State中不会被重置，输入内容得以保留。
• 移除了原initState中无效的populate调用，改为在State的initState中初始化控制器数据，避免State未创建时调用方法的问题。
• 新增didUpdateWidget方法，确保父组件传递的数据更新时，控制器内容同步更新。
• 必须在State的dispose方法中销毁控制器，防止内存泄漏。

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