当用户单击flutter应用程序中的后缀图标时，如何一一显示密码和确认密码？

Posted 2023-02-23

【中文标题】当用户单击flutter应用程序中的后缀图标时，如何一一显示密码和确认密码？

【英文标题】：how to show password and confirm password one by one when user click on suffix icon in flutter app?

【发布时间】：2020-09-22 14:01:51

【问题描述】：

当用户单击flutter应用程序中的后缀图标时，如何一一显示密码和确认密码。但是当用户单击密码文本字段的后缀图标时出现错误，它同时显示密码文本字段中的文本和确认中的文本密码文本字段。当用户点击后缀图标时，我应用更改模糊文本属性的方法。

【问题讨论】：

请添加代码示例

【参考方案1】：

一个文本字段可以有两种状态，下面是一个例子：

class Password extends StatefulWidget 
  @override
  _PasswordState createState() => _PasswordState();


class _PasswordState extends State<Password> 
  bool showPassword = true;
  bool showConfirmPassword = true;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample Code'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              obscureText: showPassword,
              decoration: InputDecoration(
                hintText: 'Enter password',
                suffixIcon: IconButton(
                  icon: Icon(Icons.remove_red_eye),
                  onPressed: () => setState(() => showPassword = !showPassword),
                ),
              ),
            ),
            TextField(
              obscureText: showConfirmPassword,
              decoration: InputDecoration(
                hintText: 'Confirm password',
                suffixIcon: IconButton(
                  icon: Icon(Icons.remove_red_eye),
                  onPressed: () => setState(
                      () => showConfirmPassword = !showConfirmPassword),
                ),
              ),
            )
          ],
        ),
      ),
    );
  

根据 OP 新请求更新

要在移动到另一个TextField 时让TextField 模糊其文本，您必须像这样使用FocusNode：

class Password extends StatefulWidget 
class Password extends StatefulWidget 
  @override
  _PasswordState createState() => _PasswordState();


class _PasswordState extends State<Password> 
  bool showPassword = true;
  bool showConfirmPassword = true;

  FocusNode passwordFocusNode;
  FocusNode confirmPasswordFocusNode;

  @override
  void initState() 
    super.initState();
    passwordFocusNode = FocusNode();
    confirmPasswordFocusNode = FocusNode();
  

  @override
  void dispose() 
    super.dispose();
    passwordFocusNode.dispose();
    confirmPasswordFocusNode.dispose();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample Code'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              onTap: () => setState(() => passwordFocusNode.requestFocus()),
              focusNode: passwordFocusNode,
              obscureText: !passwordFocusNode.hasFocus,
              decoration: InputDecoration(
                hintText: 'Enter password',
              ),
            ),
            TextField(
              focusNode: confirmPasswordFocusNode,
              onTap: () 
                setState(() 
                  FocusScope.of(context).unfocus();
                  FocusScope.of(context).requestFocus(confirmPasswordFocusNode);
                );
              ,
              obscureText: showConfirmPassword,
              decoration: InputDecoration(
                hintText: 'Confirm password',
                suffixIcon: IconButton(
                  icon: Icon(Icons.remove_red_eye),
                  onPressed: () => setState(
                      () => showConfirmPassword = !showConfirmPassword),
                ),
              ),
            )
          ],
        ),
      ),
    );
  

【讨论】：

非常感谢，但是当用户关注第二个文本字段然后另一个文本字段自动转换为模糊文本时如何实现

不客气，还可以考虑将答案标记为已接受，因为它已经解决了您的问题。