Flutter中formKey重置表单在Navigator页面跳转返回后失效如何解决

原因说明 #

Form组件的reset()方法默认只会将每个表单字段的值恢复为字段初始化时记录的initialValue。你使用Navigator.push跳转页面时，原表单页面会保留在路由栈中、状态不会销毁，你跳转前输入的内容会被表单字段记录为新的初始值，因此跳转返回后调用reset()只会恢复到跳转前的状态，而非最开始的初始状态。

可行解决方案 #

推荐通过显式绑定控制器管控所有表单值，重置时手动清空所有控制器的值即可，实现步骤如下：

1. 在State类中为每个输入字段声明对应的控制器，以及日期选择器的存储变量：

final formKey = GlobalKey<FormState>();
// 文本输入框控制器
final _input1Controller = TextEditingController();
final _input2Controller = TextEditingController();
// 日期选择器初始值，可根据自身业务需求调整
DateTime? _pickedDate;

2. 把控制器和存储变量绑定到对应的表单组件上：

Form(
  key: formKey,
  child: Column(
    children: <Widget>[
      TextFormField(controller: _input1Controller),
      const SizedBox(height: 15),
      TextFormField(controller: _input2Controller),
      const SizedBox(height: 15),
      DateTimePicker(
        value: _pickedDate,
        onChange: (val) => setState(() => _pickedDate = val),
      ),
      // 剩余InkWell、按钮组件代码保持原有逻辑不变
    ],
  ),
)

3. 修改重置按钮的点击逻辑，除了调用Form的reset方法外，手动清空所有控制器和选择值：

TextButton(
  child: const Text('Reset Form'),
  onPressed: (){
    formKey.currentState?.reset();
    // 清空所有输入框内容
    _input1Controller.clear();
    _input2Controller.clear();
    // 重置日期选择器为初始状态
    setState(() {
      _pickedDate = null;
    });
  }
)

该方案可以保证无论是否经过页面跳转，点击重置按钮都能恢复到完全初始的表单状态。

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