Flutter Web：TextFormField 在 Microsoft Edge 上显示另一个后缀图标

Question

我在 Microsoft Edge[Edge(web-javascript] 上测试我的登录表单，我的 TextFormField 上从未添加过另一个可交互的可见性按钮。当我在 Chrome，没有出现。

根据我的测试，它仅在 obscureText == true 且表单字段上有任何值时出现。

这又提出了一个问题：这只是一个调试问题吗？由于 Flutter Web 是一个 PWA，它在任何浏览器上的行为不应该是一样的吗？

在 Microsoft Edge 上录制的 Gif。

我的代码：

bool isObscured = true;

InputDecoration loginFormFieldDecoration = InputDecoration(
  constraints: const BoxConstraints(maxWidth: 400, maxHeight: 70),
  hintStyle: hintTextLoginFormFieldStyle,
  border: OutlineInputBorder(
      borderSide: BorderSide(color: cinzaEscuro, width: 1.0), borderRadius: BorderRadius.circular(12)),
  focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: cinzaEscuro, width: 1.0), borderRadius: BorderRadius.circular(12)),
  errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red[400]!, width: 1.0), borderRadius: BorderRadius.circular(12)),
  focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red[400]!, width: 1.0), borderRadius: BorderRadius.circular(12)),
);

TextFormField(
  controller: senha,
  validator: (value) {
    if (value!.isEmpty) {
      return "Insira uma senha";
    }
  },
  cursorColor: azul,
  style: formFieldValueStyle,
  keyboardType: TextInputType.visiblePassword,
  obscureText: isObscured,
  decoration: loginFormFieldDecoration.copyWith(
      prefixIcon: Icon(
        Icons.lock,
        color: cinzaEscuro,
      ),
      suffixIcon: IconButton(
          splashRadius: 0.1,
          onPressed: () {
            setState(() {
              isObscured = !isObscured;
            });
          },
          icon: Icon(
            isObscured ? Icons.visibility_off : Icons.visibility,
            color: isObscured ? cinzaEscuro : azul,
          )),
      hintText: "Digite a sua senha"),
)

版本：

Flutter 2.4.0-1.0.pre.82 • channel master • https://github.com/flutter/flutter.git
Framework • revision 5cda761161 (6 weeks ago) • 2021-07-05 21:46:01 -0400
Engine • revision 60ff03819c
Tools • Dart 2.14.0 (build 2.14.0-280.0.dev)
Microsoft Edge version 92.0.902.73

Answer 1

经过一些研究，我在 github 上发现了一个关于这个问题的未解决问题。还有一个解决方法。

见this issue.

Flutter Web：TextFormField 在 Microsoft Edge 上显示另一个后缀图标

Flutter Web: TextFormField shows another suffixIcon on Microsoft Edge

flutter

flutter-layout

flutter-web