在 Web 上，如何控制自动显示在焦点 TextFormField 上的可见性图标，该 TextFormField 的 obscureText 属性设置为 true？

Posted 2023-02-23

【中文标题】在 Web 上，如何控制自动显示在焦点 TextFormField 上的可见性图标，该 TextFormField 的 obscureText 属性设置为 true？

【英文标题】：On web, how do I control the visibility icon that automatically appears on a focused TextFormField that has an obscureText property set to true?

【发布时间】：2021-06-18 01:37:33

【问题描述】：

这是我的密码字段代码：

TextFormField(
  obscureText: isObscure,
  decoration: InputDecoration(
    suffix: TextButton(
      child: isPasswordObscure
          ? Text(
            'Show', 
            style: TextStyle(color: Colors.grey),
          )
          : Text(
            'Hide',
            style: TextStyle(color: Colors.grey),
          ),
      onPressed: () 
        setState(()  isObscure = !isObscure; );
      ,
    ),
  ),
)

如果我运行它，密码字段将如下所示：

如果您查看我的代码，我只指定了一个文本按钮而不是一个图标作为后缀。可见性图标是由 Flutter Edge 添加的，当我单击它时，它只会更改其图标，不会使文本字段变得模糊或模糊。

我想知道如何更改或删除图标？也许还给它一个回调，这样当我点击它时它就知道该做什么了。

问题在移动设备上不存在，仅在浏览器桌面 Edge 上存在。

编辑： 我尝试将suffix 和suffixIcon 设置为null，但可见性图标仍然显示。

更新：我发现问题只存在于 MS Edge 上。

【参考方案1】：

请找到以下代码示例以包含 textField 的可见性选项。通过在有状态小部件中包含变量_isObscured。我们已经用 2 秒延迟后的自动模糊来实现它。

 Center(child: TextField(
        obscureText: _isObscured,
        decoration : InputDecoration(
        suffix:InkWell(
                onTap: ()
                    setState(() => this._isObscured = 
                    !this._isObscured);
                    Future.delayed(Duration(seconds: 2), ()
                      setState(() => this._isObscured = 
                      !this._isObscured);

                    );
                ,
                child: Icon( Icons.visibility),
            ),
         ),
      ), 
    ),
  ),

【讨论】：

嗨，请再次阅读我的问题。谢谢：D

@BlazeT。您是否使用任何库来生成表单。

不，我不是。你能重现这个问题吗？

不。我们不能我只能得到普通的文本字段

已解决。它仅在 Microsoft Edge 上显示，而不在 Google Chrome 上显示。不过不知道其他浏览器。

【参考方案2】：

如果你想关闭设置onPressed的可见性图标：()， 另外，如果您想删除可见性图标表单概述，请使用不透明度小部件将其包装

不透明度（ 不透明度：0.0， 孩子：文本按钮（），

【讨论】：

嗨，请再次阅读我的问题。谢谢：D