Flutter TextFormField 隐藏密码答案

【问题标题】：Flutter TextFormField Obscure PasswordFlutter TextFormField 隐藏密码
【发布时间】：2021-08-25 03:12:29
【问题描述】：

每当我定义 TextFormField 的 obscureText 属性时，都会在末尾自动添加一个后缀图标，但按下它后什么也没有发生，
前缀图标由我定义，但后缀图标是自动添加的。
如何使该默认图标具有交互性，以便在不添加我们自己的后缀图标的情况下相应地显示或隐藏密码？

TextFormField(
  style: TextStyle(color: Colors.black),
  obscureText: true,
  decoration: InputDecoration(
    hintText: "Enter Password",
    labelText: "Password",
    prefixIcon: Icon(Icons.lock),
  ),
),

【问题讨论】：

请查看此答案stackoverflow.com/questions/49125064/…

标签： flutter dart

【解决方案1】：

 suffixIcon: IconButton(
      onPressed: () => ShowHideFuncion(),
      icon: Icon(Icons.YourIcon),
    ),

【讨论】：

【解决方案2】：

您需要在您的小部件中创建一个 bool 类型的变量（例如 obscure）。然后，您将 obscureText 参数从 true 更改为您创建的变量。然后添加suffixIcon 和IconButton()（查看更多here）。在IconButton() 的onPressed 参数中设置变量不等于变量。（例如obscure = !obscure）。您可能需要将您的小部件设为无状态小部件，如果它没有自动更新，请调用 setState(() => obscure = !obscure)。

最终的代码应该是这样的：


Icon icon = Icon(Icons.visibility);
bool obscure = true;

TextFormField(
  style: TextStyle(color: Colors.black),
  obscureText: obscure,
  decoration: InputDecoration(
    hintText: "Enter Password",
    labelText: "Password",
    suffixIcon: IconButton(
      onPressed: () {
        setState(() {
          if (obscure == true) {
            obscure = false;
            icon = Icon(Icons.visibility_off);
          } else {
            obscure = true;
            icon = Icon(Icons.visibility);
          }
        });
      },
      icon: icon
    ),
  ),
),

【讨论】：

【解决方案3】：

这是因为您没有更改 obsecuretext 的状态。为此，请在主类中声明布尔类型的变量。

  bool isPassword = false;

现在在 obscureText 中使用您在主类中声明的变量，如下所示。

`obscureText = isPasswordVisible`

现在制作一个图标按钮，通过使用 set state 来改变布尔值的状态，如下所示。

suffixIcon: IconButton(
  onPressed: () {
    setState(() {
      isPasswordVisible = !isPasswordVisible
    });
  },
  icon: isPasswordVisible  ? Icon(Icons.any_icon_you want) : Icon(Icons.any_Icon_you_want_to_display_when_obsecure_is_false)
),

【讨论】：