Flutter点击密码显示按钮时输入框内容被清空的问题

问题原因 #

你把_emailController和_passController放在了每次Widget重建都会重新实例化的位置（比如build方法内部）。点击按钮触发setState时，Widget会重建，两个控制器被重新创建，之前输入的内容也就跟着丢失了。

修复后的完整代码示例 #

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  bool _visiblePassword = false;
  // 将控制器提升为State类的成员变量
  late final TextEditingController _emailController;
  late final TextEditingController _passController;

  @override
  void initState() {
    super.initState();
    _visiblePassword = false;
    // 在initState中初始化控制器，确保只执行一次
    _emailController = TextEditingController();
    _passController = TextEditingController();
  }

  @override
  void dispose() {
    // 页面销毁时释放控制器资源，避免内存泄漏
    _emailController.dispose();
    _passController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(28),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              controller: _emailController,
              style: TextStyle(color: Color.fromARGB(255, 214, 213, 213)),
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                filled: true,
                hintStyle: TextStyle(color: Color.fromARGB(255, 197, 197, 197)),
                hintText: "Enter your email",
                fillColor: setupMainTheme,
              ),
            ),
            SizedBox(height: 18),
            TextFormField(
              controller: _passController,
              obscuringCharacter: '*',
              obscureText: !_visiblePassword,
              style: TextStyle(color: Color.fromARGB(255, 214, 213, 213)),
              decoration: InputDecoration(
                suffixIcon: IconButton(
                  icon: Icon(
                    _visiblePassword ? Icons.visibility : Icons.visibility_off,
                    color: Theme.of(context).primaryColorDark,
                  ),
                  onPressed: () {
                    setState(() {
                      _visiblePassword = !_visiblePassword;
                    });
                  },
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                filled: true,
                hintStyle: TextStyle(color: Color.fromARGB(255, 197, 197, 197)),
                hintText: "Enter your password",
                fillColor: setupMainTheme,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改点 #

• 将_emailController和_passController改为State类的成员变量，用late final声明保证只初始化一次
• 在initState方法中完成控制器初始化，避开Widget重建流程
• 添加dispose方法释放控制器资源，这是Flutter开发的标准优化手段，防止内存泄漏

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