如果使用了InputDecoration的suffixIcon或prefixIcon属性，TextFormField中的TextInput会得到底部填充

Question

上图： 正常好看的TextFormField，不提供任何WidgetforsuffixIcon

下图： 提供Icon WidgetforsuffixIcon使文本输入不必要地浮动

知道是什么原因造成的吗？

代码： 这是一个纯 TextFormFieldsuffixIcon

   TextFormField(
      decoration: InputDecoration(
        suffixIcon: Icon(Icons.search),
      )
    )

Answer 1

目前的解决方案：

TextFormField(
   textAlignVertical: TextAlignVertical.bottom,
   decoration: InputDecoration(
      prefixIcon: Padding(
         padding: const EdgeInsets.only(top: 12.0, right: 12.0),
         child: Icon(Icons.search)
      ),
   ),
)

文档：

prefixIcon: Padding(
  padding: const EdgeInsetsDirectional.only(start: 12.0),
  child: myIcon, // myIcon is a 48px-wide widget.
)

因为显然根据文档， 和prefixIcon被suffixIcon包裹在Padding Widget值为 12 中。因此，为了使其回到原始位置，我们可以以相反的方向包裹它Padding，在这种情况下top，right因为我正在使用prefixIcon. 如果您使用 suffixIcon，请将其用top和括起来left。最后一件事，为了使文本输入不浮动（底部填充），我添加了这个textAlignVertical: TextAlignVertical.bottom