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

Question

我正在使用 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),
              ),
            ),
          ),
        ),
      )
    );

但是，当它被呈现时，占位符及其值在垂直方向上有点向上，如下面的屏幕截图所示。

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

Answer 1

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

style: TextStyle(
    height: 0.5
),

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

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

I used the following code and it is working

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

Answer 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',
    ),
  ),
)

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

TextField placeholder and text vertical alignment is not right

flutter

flutter-text