当高度小于默认值时，Flutter 将提示文本在 SearchBar Widget 中垂直和水平居中对齐

Question

我正在尝试在我的应用程序中创建一个搜索栏，其中包含提示文本。然而，我的输出看起来很奇怪，提示文本没有与搜索栏上的垂直中心对齐。下面的图片和块是我的输出和我的代码：

SearchBar(
  hintText: 'Search Employee',
  hintStyle: MaterialStateProperty.all(const TextStyle(color: Color(0xFFA1A5C0), fontSize: 11)),
  constraints: const BoxConstraints(minHeight: 28),
  leading: const Icon(Icons.search, size: 15),
  elevation: const MaterialStatePropertyAll(0),
  side: MaterialStateProperty.all(const BorderSide(color: Color.fromRGBO(1, 1, 1, 0.1))),
  shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(40))),
)

Answer 1

您应该使用像这样的自定义控件：

Container(
                margin: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    border: Border.all(width: 1)),
                child: TextFormField(
                    style: const TextStyle(fontSize: 12),
                    decoration: const InputDecoration(
                      alignLabelWithHint: true,
                      contentPadding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                      hintText: "Search Employee",
                      hintStyle:
                          TextStyle(color: Color(0xFFA1A5C0), fontSize: 12),
                      border: InputBorder.none,
                    )),
              ),

使用这样的东西的好处是：

1. 完全可定制的用户界面
2. 您可以根据您的要求添加控件

Answer 2

这是已知的错误，flutter 团队修复了这个问题，但是合并到稳定通道需要时间，所以你可以使用

TextField

代替，如下所示：

  TextField(
    decoration: InputDecoration(
      hintText: 'Search Employee',
      hintStyle: const TextStyle(color: Color(0xFFA1A5C0), fontSize: 18),
      border: OutlineInputBorder(
        borderSide: const BorderSide(color: Color.fromRGBO(1, 1, 1, 0.1)),
        borderRadius: BorderRadius.circular(40),
      ),
      enabledBorder: OutlineInputBorder(
        borderSide: const BorderSide(color: Color.fromRGBO(1, 1, 1, 0.1)),
        borderRadius: BorderRadius.circular(40),
      ),
      prefixIcon: const Icon(Icons.search, size: 36),
      prefixIconColor: Colors.black,
      constraints: const BoxConstraints(minHeight: 28),
      isDense: true,
      fillColor: Colors.white,
      filled: true,
    ),
  ),