Flutter Dart中如何重置TextFormField的表单状态（清除错误）

方法一：监听页面生命周期自动重置状态 #

通过监听页面生命周期，当登录页从后台回到前台（比如从忘记密码页返回）时，自动清空输入内容和错误提示：

1. 为邮箱、密码输入框创建TextEditingController，同时维护错误提示的状态变量
2. 混入WidgetsBindingObserver监听页面生命周期
3. 在页面恢复可见时执行重置操作

代码示例：

class LoginPageState extends State<LoginPage> with WidgetsBindingObserver {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  String? _loginError;

  @override
  void initState() {
    super.initState();
    // 注册生命周期监听
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    // 取消监听并销毁控制器
    WidgetsBinding.instance.removeObserver(this);
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 页面回到前台时重置状态
    if (state == AppLifecycleState.resumed) {
      _emailController.clear();
      _passwordController.clear();
      setState(() => _loginError = null);
    }
  }

  // 登录按钮点击逻辑
  void _handleLogin() {
    if (_emailController.text.isEmpty || _passwordController.text.isEmpty) {
      setState(() => _loginError = "请输入邮箱和密码");
      return;
    }
    // 执行登录逻辑
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              controller: _emailController,
              decoration: const InputDecoration(labelText: "邮箱"),
            ),
            const SizedBox(height: 16),
            TextFormField(
              controller: _passwordController,
              decoration: const InputDecoration(labelText: "密码"),
              obscureText: true,
            ),
            if (_loginError != null)
              Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Text(
                  _loginError!,
                  style: const TextStyle(color: Colors.red),
                ),
              ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: _handleLogin,
              child: const Text("登录"),
            ),
            TextButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(
                  builder: (context) => const ForgotPasswordPage()
                ));
              },
              child: const Text("忘记密码？"),
            )
          ],
        ),
      ),
    );
  }
}

方法二：跳转时监听返回事件 #

如果只需要在从忘记密码页返回时重置状态，可以在跳转时使用then方法，监听页面返回的回调：

修改忘记密码按钮的点击逻辑：

TextButton(
  onPressed: () {
    Navigator.push(context, MaterialPageRoute(
      builder: (context) => const ForgotPasswordPage()
    )).then((_) {
      // 页面返回时清空输入和错误
      _emailController.clear();
      _passwordController.clear();
      setState(() => _loginError = null);
    });
  },
  child: const Text("忘记密码？"),
)

两种方法都能实现需求，方法一适合所有场景下回到登录页都重置状态，方法二更精准，只针对从忘记密码页返回的情况。

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