如何在 Flutter 中垂直对齐 TextField 的提示文本？

Question

发生了一些奇怪的事情，由于某种原因，我不能将hintText垂直对齐在TextField内，当文本字段具有焦点时会发生最奇怪的事情（参见 gif）。 borderRadius丢失了，显然在那一刻它是固定的。 当文本字段的焦点丢失时，它会再次变得混乱。 我该如何纠正？

这是我的代码：

Widget _searchBar() {
 return Container(
  height: 40,
  child: TextField(
    textAlignVertical: TextAlignVertical.center,
    style: TextStyle(
      color: _styles["gris_oscuro1"]["color"],
    ),
    onChanged: (value) {},
    decoration: InputDecoration(
      filled: true,
      fillColor: _styles["gris_claro"]["color"],
      alignLabelWithHint: true,
      hintText: "Buscar por código",
      hintStyle: TextStyle(color: _styles["gris_oscuro2"]["color"]),
      prefixIcon:
          Icon(Icons.search, color: _styles["gris_oscuro2"]["color"]),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(40)),
        borderSide:
            BorderSide(color: _styles["gris_claro"]["color"], width: 1.0),
      ),
    ),
  ),
);


  Scaffold(
    key: _scaffoldKey,
    backgroundColor: _styles["fondo"]["bg"],
    drawer: MenuWidget(),
    body: SafeArea(
      child: _searchBar(),
    )

Answer 1

这是因为您给父容器的高度。 提示文字垂直对齐可以有两种方式，（它们是相互独立的，任选其一）

child: Container(
  // height: 48, //ONE - Remove the static height
  child: TextField(
    textAlignVertical: TextAlignVertical.center,
    style: TextStyle(
      textBaseline: TextBaseline.alphabetic,
      color: Colors.red,
    ),
    onChanged: (value) {},
    decoration: InputDecoration(
      // contentPadding: EdgeInsets.all(8.0), //TWO - Specify the padding if you want your custom height.
      filled: true,
      alignLabelWithHint: true,
      hintText: "Buscar por código",
      hintStyle: TextStyle(color: Colors.red),
      prefixIcon: Icon(Icons.search, color: Colors.red),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(40)),
        borderSide: BorderSide(color: Colors.red, width: 1.0),
      ),
    ),
  ),
),

1. 移除容器的高度
2. 如果要根据需要调整父容器的大小，则必须为内容指定一些内部填充。

编辑：当您点击 TextField 时，您将失去边框，因为您没有将任何内容传递给TextField的focusedBorder属性。 按照下面的代码：

decoration: InputDecoration(
  filled: true,
  alignLabelWithHint: true,
  hintText: "Buscar por código",
  hintStyle: TextStyle(color: Colors.red),
  prefixIcon: Icon(Icons.search, color: Colors.red),
  enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(40)),
    borderSide: BorderSide(color: Colors.red, width: 1.0),
  ),
  focusedBorder: OutlineInputBorder( //Add this to your code...
    borderRadius: BorderRadius.all(Radius.circular(40)),
    borderSide: BorderSide(color: Colors.red, width: 1.0),
  ),
),