Flutter：后缀图标使文本不居中答案

【问题标题】：Flutter: suffixIcon making text not centeredFlutter：后缀图标使文本不居中
【发布时间】：2021-08-07 23:29:53
【问题描述】：

我有3个TextFormFields，最后一个是密码，这意味着它需要一个后缀图标来显示/隐藏密码，如果没有内容，标签显示在字段的中心，这是需要的样子：

但是一旦添加了一些内容，密码文本就会得到一些填充（图标的大小作为填充添加到内容中），如下所示：

我尝试使用带有 TextFormField 和图标的堆栈，但如果图标在顶部，则密码字段不可点击，如果密码字段在顶部，则图标不可点击。

有人知道如何解决这个填充问题吗？

【问题讨论】：

你能添加你的代码sn-p吗？

标签： flutter

【解决方案1】：

您可以尝试在您的decoration 中使用prefixIcon 作为您的TextFormField。

看起来像这样：

TextFormField(
    //all your other widget here
    decoration: InputDecoration(
        prefixIcon: prefixIcon??Icon(Icons.visibility),
    ),
),

【讨论】：

我尝试添加一个prefixIcon，但文本仍然没有居中

【解决方案2】：

如果您在使用 Stack 子代 pressed/tap 时遇到问题。将可点击的小部件放在堆栈的底层。

这是您可以尝试的密码字段：


class PassWordFied extends StatefulWidget {
  PassWordFied({Key? key}) : super(key: key);

  @override
  _PassWordFiedState createState() => _PassWordFiedState();
}

class _PassWordFiedState extends State<PassWordFied> {
  bool _isVisiblePassword = true;

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
          contentPadding: EdgeInsets.all(15),
          // isDense: true, //you can test it 
          suffixIcon: GestureDetector(
            onTap: () {
              setState(() {
                _isVisiblePassword = !_isVisiblePassword;
              });
            },
            child: Icon(
              _isVisiblePassword ? Icons.visibility_off : Icons.visibility,
            ),
          ),
          fillColor: Colors.white.withOpacity(.7),
          filled: true,
          labelText: "Password"),
      obscureText: _isVisiblePassword,
    );
  }
}

【讨论】：

我通过在输入的开头（左侧）保持文本对齐来解决它。