Flutter中如何隐藏密码输入？实现星号显示密码的方法

嘿，这个问题超容易搞定！要让密码以星号（或系统默认的隐藏符号）显示，只需要给密码对应的TextField加上obscureText属性就行，具体操作如下：

基础解决方案：直接隐藏密码 #

先修改你的_entryField方法，增加一个可选参数来区分是否是密码输入框，然后设置obscureText属性：

Widget _entryField(
  String title,
  TextEditingController controller,
  {bool isPassword = false, // 添加可选参数，默认非密码输入
}) {
  return TextField(
    controller: controller,
    obscureText: isPassword, // 关键：设为true时输入内容会被隐藏
    decoration: InputDecoration(
      labelText: title,
    ),
  );
}

然后在调用密码输入框的时候，传入isPassword: true：

_entryField('password', _controllerPassword, isPassword: true),

这样设置后，密码输入就会自动变成星号/圆点隐藏起来啦。

进阶优化：添加显示/隐藏密码按钮 #

如果想提升用户体验，让用户可以切换密码的显示状态，可以给密码输入框加一个切换按钮，具体实现如下：

1. 首先在你的State类里添加一个变量来控制密码的隐藏状态：

bool _obscurePassword = true;

2. 修改_entryField方法，支持传入隐藏状态和切换回调：

Widget _entryField(
  String title,
  TextEditingController controller,
  {bool isPassword = false,
  bool? obscureText,
  VoidCallback? onToggleObscure}) {
  return TextField(
    controller: controller,
    obscureText: isPassword ? (obscureText ?? true) : false,
    decoration: InputDecoration(
      labelText: title,
      // 仅密码输入框显示切换图标
      suffixIcon: isPassword
          ? IconButton(
              icon: Icon(
                obscureText ?? true ? Icons.visibility_off : Icons.visibility,
              ),
              onPressed: onToggleObscure,
            )
          : null,
    ),
  );
}

3. 调用密码输入框时传入状态和切换逻辑：

_entryField(
  'password',
  _controllerPassword,
  isPassword: true,
  obscureText: _obscurePassword,
  onToggleObscure: () {
    setState(() {
      _obscurePassword = !_obscurePassword;
    });
  },
),

这样用户就能点击输入框右侧的眼睛图标，自由切换密码的显示/隐藏状态啦。

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