在 web 上，如何控制自動出現在具有 obscureText 屬性設置為 true 的聚焦 TextFormField 上的可見性圖標？

Question

這是我的密碼字段代碼：

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 上。

Answer 1

如果你想關閉可見性圖標集 onPressed: () {}，如果你想刪除可見性圖標表單概述，用不透明度小部件包裝它

不透明度（不透明度：0.0，孩子：textButton（），

Answer 2

請找到以下代碼示例以包含 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),
            ),
         ),
      ), 
    ),
  ),

Answer 3

我找到了一個解決方案：

// the magic function
void fixEdgePasswordRevealButton(FocusNode passwordFocusNode) {
  passwordFocusNode.unfocus();
  Future.microtask(() {
    passwordFocusNode.requestFocus();
    js.context.callMethod("fixPasswordCss", []);
  });
}

// widget code
            child: TextField(
              onChanged: (_) async {
                fixEdgePasswordRevealButton(passwordFocusNode);
              },
              focusNode: passwordFocusNode,
              obscureText: true,

// end of index.html
    window.fixPasswordCss = () => {
      let style = document.createElement('style');
      style.innerHTML = '::-ms-reveal { display: none; }';
      document.head.appendChild(style);
    }
  </script>
</body>

也貼上了相關issue 。