首页 > 解决方案 > 无法在 Flutter TextField 小部件中垂直居中输入文本和后缀

问题描述

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

当我不指定后缀时,输入文本根据需要垂直居中: 在此处输入图像描述 当我指定后缀时,输入文本下降而后缀上升,因此它们都不是垂直居中的: 在此处输入图像描述

我的代码:

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",
          ),
        ),
      ),
    );

问题:

我应该怎么做才能垂直居中输入文本和后缀?

标签: fluttertextfieldsuffix

解决方案


包裹图标Transform.translate并为其设置propper偏移


推荐阅读