0

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

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

在此处输入图像描述

在此处输入图像描述

我的代码有什么问题,我该如何解决?

4

2 回答 2

2

将文本样式高度设置为 0.5 会导致文本跨度为字体大小的一半。删除它,因为不认为这会帮助你。

style: TextStyle(
    height: 0.5
),

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

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

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

contentPadding: EdgeInsets.fromLTRB(0, 8, 0, 0),
于 2020-07-04T18:02:49.763 回答
0

在此处输入图像描述

如果您设置自定义高度,请尝试此操作。

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',
    ),
  ),
)
于 2021-07-19T11:09:11.967 回答