密码显示/隐藏切换删除密码 TextField 值 (Flutter)

Question

当我点击显示/隐藏切换时，密码和用户名文本字段值都会被删除。我知道，当 setState 重建小部件树时，它将密码/用户名文本字段值重置为初始空白值。我知道我可以获取文本字段的值，但是我无法实现逻辑，如何首先获取当前用户名和密码值，将其保存在某处，然后在小部件与 setState 一起重建时将其插入回。

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  bool _showPassword = true;

  @override
  Widget build(BuildContext context) {
    final usernameController = TextEditingController();
    final passwordController = TextEditingController();
    return SafeArea(
      child: Scaffold(
        body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Image(image: AssetImage('images/logo.png')),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  children: [
                    TextField(
                      controller: usernameController,
                      decoration: InputDecoration(
                        hintText: "Enter Username",
                        labelText: "UserName",
                      ),
                    ),
                    SizedBox(
                      height: 20.0,
                    ),
                    TextField(
                      obscureText: _showPassword,
                      controller: passwordController,
                      decoration: InputDecoration(
                        hintText: "Enter Password",
                        labelText: "Password",
                        suffixIcon: GestureDetector(
                          onTap: _togglePasswordVisibility,
                          child: _showPassword
                              ? Icon(Icons.visibility)
                              : Icon(Icons.visibility_off),
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 20.0,
                    ),
                    RaisedButton(
                      onPressed: () {
                        //call api here to authenticate user
                      },
                      child: Text("Login"),
                    ),
                  ],
                ),
              ),
              Column(
                children: [
                  Text("Don't have an account! Get it in 2 easy steps"),
                  RaisedButton(
                    onPressed: () {
                      //take user to registration screen
                    },
                    child: Text("Register"),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _togglePasswordVisibility() {
    setState(() {
      _showPassword = !_showPassword;
    });
  }
}

Answer 1

当您使用 setState 切换可见性时，将调用 build 方法来重绘该小部件。由于您在构建方法中初始化 TextEditingController，因此它会再次初始化并丢失先前的值。要解决此问题，您只需将初始化从构建方法删除到类级别。

class _LoginScreenState extends State<LoginScreen> {
  bool _showPassword = true;
  final usernameController = TextEditingController();
  final passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    
    return SafeArea(
        //... Your code
    );
  }
  //... Your code
}