Flutter中如何在Widget内实现密码显示/隐藏功能？

完全可以在TextField（或TextFormField）内实现密码显示与隐藏的切换，核心思路是通过状态变量控制密码是否隐藏，再在输入框尾部添加可点击的图标按钮来切换状态。

以下是修改后的完整代码示例：

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

  @override
  State<PasswordField> createState() => _PasswordFieldState();
}

class _PasswordFieldState extends State<PasswordField> {
  // 控制密码是否隐藏的状态变量，初始为隐藏
  bool _isPasswordObscured = true;

  @override
  Widget build(BuildContext context) {
    return TextField(
      // 根据状态变量控制密码是否隐藏
      obscureText: _isPasswordObscured,
      style: const TextStyle(color: Colors.black87),
      decoration: InputDecoration(
        border: InputBorder.none,
        contentPadding: const EdgeInsets.only(top: 14),
        prefixIcon: const Icon(
          Icons.lock,
          color: Color(0xff992a32),
        ),
        hintText: '请输入密码',
        hintStyle: const TextStyle(color: Colors.black38),
        // 添加尾部图标按钮，用于切换密码显示状态
        suffixIcon: IconButton(
          icon: Icon(
            // 根据状态切换显示的图标
            _isPasswordObscured ? Icons.visibility_off : Icons.visibility,
            color: const Color(0xff992a32),
          ),
          onPressed: () {
            // 点击时反转状态，更新UI
            setState(() {
              _isPasswordObscured = !_isPasswordObscured;
            });
          },
        ),
      ),
    );
  }
}

关键说明： #

• 用StatefulWidget管理状态，因为需要动态更新密码显示状态
• _isPasswordObscured布尔变量直接控制obscureText参数，true隐藏密码，false显示密码
• suffixIcon设为IconButton，点击时调用setState反转状态变量，触发UI更新

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