Flutter中返回页面时如何自动重置表单

以下是几种简单直接的实现方式，适用于Flutter项目：

方法一：利用Navigator.push的then回调（最常用） #

当你跳转到下一页时，通过then回调监听页面返回事件，在回调里直接清空两个控制器的内容：

// 跳转至下一页的代码
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const NextPage()),
    ).then((_) {
      // 从下一页返回时执行清空操作
      customAmountController.clear();
      messageController.clear();
    });
  },
  child: const Text("跳转"),
)

不管是按系统返回键，还是下一页内调用Navigator.pop(context)，都会触发这个回调，自动清空输入框。

方法二：根据返回结果决定是否清空 #

如果需要根据下一页的操作结果（比如提交成功才清空），可以在返回时传递参数，再判断是否执行清空：

// 原页面跳转代码
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const NextPage()),
).then((result) {
  // 当下一页返回true时才清空
  if (result == true) {
    customAmountController.clear();
    messageController.clear();
  }
});

// 下一页返回时传递结果的代码
// 提交成功后返回true
ElevatedButton(
  onPressed: () {
    Navigator.pop(context, true);
  },
  child: const Text("提交并返回"),
)

// 取消操作返回false，不清空输入框
ElevatedButton(
  onPressed: () {
    Navigator.pop(context, false);
  },
  child: const Text("取消返回"),
)

注意事项 #

• 记得在StatefulWidget的dispose方法中释放控制器，避免内存泄漏：

@override
void dispose() {
  customAmountController.dispose();
  messageController.dispose();
  super.dispose();
}

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