无法在 Flutter TextField 小部件中垂直居中输入文本和后缀

Posted 2023-02-19

【中文标题】无法在 Flutter TextField 小部件中垂直居中输入文本和后缀

【英文标题】：Can't vertically center both input text and suffix in the Flutter TextField widget

【发布时间】：2021-06-13 19:54:27

【问题描述】：

我很难在 TextField Flutter 小部件中对齐输入 ext 和后缀。我尝试将它们垂直居中，但由于某种原因不能这样做。

当我不指定后缀时，输入文本会根据需要垂直居中： 当我指定后缀时，输入文本下降而后缀上升，因此它们都不是垂直居中的：

我的代码：

return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        title: Text('test'),
      ),
      body: Container(
        color: Colors.grey.shade800,
        margin: EdgeInsets.symmetric(
          horizontal: 20,
          vertical: 10,
        ),
        height: 70,
        alignment: Alignment.centerLeft,
        child: TextField(
          style: TextStyle(
            textBaseline: TextBaseline.alphabetic,
            color: Colors.white,
            fontSize: 17,
            fontWeight: FontWeight.w400,
            decoration: TextDecoration.none,
          ),
          textAlignVertical: TextAlignVertical.center,
          decoration: InputDecoration(
            suffix: Icon(
              Icons.clear,
              color: Colors.red,
            ),
            suffixStyle: TextStyle(
              color: Theme.of(context).textTheme.bodyText1.color,
              fontWeight: FontWeight.w400,
              fontSize: 17,
              textBaseline: TextBaseline.ideographic,
            ),
            border: InputBorder.none,
            hintText: "Search",
          ),
        ),
      ),
    );

问题：

如何使输入文本和后缀垂直居中？

【参考方案1】：

将图标包裹在Transform.translate 中并为其设置propper 偏移量