当 flutter 上的 obliqueText 为 true 时，如何删除或隐藏默认图标

Question

我使用 Flutter（Channel 稳定，3.7.6，在 Microsoft Windows [版本 10.0.19042.928]，区域设置 en-US） 我的情况是，当 obliqueText = true 时，我需要删除 textField 上的默认图标，因为我在装饰输入上使用 suffixIcon 。 在此输入图片描述 我的代码是这样的：

Padding(
            padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
            child: TextField(
              obscureText: _obscured,  
              controller: _password,
              textInputAction: TextInputAction.done,
              keyboardType: TextInputType.visiblePassword,
              decoration: InputDecoration(
                  icon: Icon(Icons.lock,
                      size: 32,
                      color: Colors.black),
                  labelText: "Password",
                  // hintText: "Password",
                  labelStyle: TextStyle(
                      color: Colors.black),
                  suffixIcon: IconButton(
                     icon: Icon(_obscured ? Icons.visibility_off : Icons.visibility),
                     onPressed: () {
                       setState(() {
                           _obscured = !_obscured;
                         },
                       );
                     },
                   ),
                // alignLabelWithHint: false,
                // filled: true,
              ),
            ),
          ),

我需要这个案例的解决方案。先谢谢你了

Answer 1

默认情况下，当 TextField 中的 obliqueText 设置为 true 时，Flutter 会添加可见性切换图标。但是，当您需要使用自定义图标（例如，带有 suffixIcon）时，您可以简单地在 InputDecoration 的 suffixIcon 参数中提供您自己的小部件，并且默认的可见性图标将被替换。

以下是如何通过使用 TextField 小部件、设置遮蔽文本并添加自定义后缀图标来处理可见性状态之间的切换来实现此目的：

这是所有代码

如果您希望 suffixIcon 是可选的（例如，仅在密码时显示它，但在其他输入字段中不显示），您可以在 suffixIcon 字段内添加条件逻辑，以根据输入类型显示或隐藏它。