TextField 占位符和文本垂直对齐不正确答案

【问题标题】：TextField placeholder and text vertical alignment is not rightTextField 占位符和文本垂直对齐不正确
【发布时间】：2020-10-25 04:25:54
【问题描述】：

我正在使用 Flutter 开发一个移动应用程序。我在对齐文本字段的占位符文本及其值垂直居中时遇到问题。

这是我的 TextField 代码。

return Container(
      color: Colors.black,
      child: Padding(
        padding: EdgeInsets.all(10),
        child: TextField(
          onChanged: (text) {
            this.filter = text.toLowerCase();
            this._refreshListItems();
          },
          style: TextStyle(
            height: 0.5
          ),
          cursorColor: Colors.black12,
          textAlignVertical: TextAlignVertical.center,
          decoration: InputDecoration(
            filled: true,
            fillColor: Colors.white,
              prefixIcon: Icon(Icons.search, color: Colors.black26,),
              border: OutlineInputBorder(
                borderRadius: const BorderRadius.all(
                  const Radius.circular(10.0),
                ),
              ),
              hintText: "Search",
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.white),
              borderRadius: const BorderRadius.all(
                const Radius.circular(10.0),
              ),
            ),
          ),
        ),
      )
    );

但是，当它被渲染时，占位符及其值会在垂直方向上稍微向上一点，如下面的屏幕截图所示。

我的代码有什么问题，我该如何解决？

【问题讨论】：

您想用TextStyle(height: 0.5) 实现什么目标？如果您删除它，它可能会解决问题。
但是TextField的高度变得太大了。

标签： flutter flutter-text

【解决方案1】：

将文本样式高度设置为 0.5 会导致文本跨度为字体大小的一半。删除它，因为认为这对您没有帮助。

style: TextStyle(
    height: 0.5
),

为了处理内容大小，您可以使用contentPadding

decoration: InputDecoration(
   contentPadding: EdgeInsets.all(1),
   ....
   ),

我使用了以下代码，它正在工作

contentPadding: EdgeInsets.fromLTRB(0, 8, 0, 0),

【讨论】：

【解决方案2】：

如果你设置了自定义高度，试试这个。

Container(
  height: 36,
  child: TextField(
    maxLines: 1,
    style: TextStyle(fontSize: 17),
    textAlignVertical: TextAlignVertical.center,
    decoration: InputDecoration(
      filled: true,
      prefixIcon:
          Icon(Icons.search, color: Theme.of(context).iconTheme.color),
      border: OutlineInputBorder(
          borderSide: BorderSide.none,
          borderRadius: BorderRadius.all(Radius.circular(30))),
      fillColor: Theme.of(context).inputDecorationTheme.fillColor,
      contentPadding: EdgeInsets.zero,
      hintText: 'Search',
    ),
  ),
)

【讨论】：