当用户在flutter app中点击后缀图标时，如何一一显示密码和确认密码？

Question

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

Answer 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),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

当用户在flutter app中点击后缀图标时，如何一一显示密码和确认密码？

how to show password and confirm password one by one when user click on suffix icon in flutter app?

flutter

flutter-dependencies

flutter-layout

flutter-web

根据 OP 新请求更新