TextFormField中的TextInput如果使用了InputDecoration的suffixIcon或prefixIcon属性，则将其底部填充

Question

顶部图片：正常外观良好的TextFormField，但不为Widget

提供任何suffixIcon

下图：将Icon Widget替换为suffixIcon会使文本输入不必要地浮动

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

代码：这是带有suffixIcon

的普通TextFormField

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

Answer 1

这可能不是最好的方法，但是可以。您可以用TextFormField包装Container。这样可以使文本和图标位于同一行。

  Padding(
       padding: EdgeInsets.all(15),
          child: Container(
              height: 25,
              child: TextFormField(
                  decoration: InputDecoration(
                suffixIcon: Icon(Icons.search),
              ))))

输出

Answer 2

当前解决方案：

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