在 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?在 Web 上，如何控制自动显示在焦点 TextFormField 上的可见性图标，该 TextFormField 的 obscureText 属性设置为 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 上。

【问题讨论】：

标签： flutter flutter-web

【解决方案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