【问题标题】:Can't vertically center both input text and suffix in the Flutter TextField widget无法在 Flutter TextField 小部件中垂直居中输入文本和后缀
【发布时间】: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",
          ),
        ),
      ),
    );

问题:

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

【问题讨论】:

    标签: flutter textfield suffix


    【解决方案1】:

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

    【讨论】:

      猜你喜欢
      • 2019-11-17
      • 1970-01-01
      • 2020-02-07
      • 1970-01-01
      • 1970-01-01
      • 2018-04-02
      • 2018-07-11
      • 2018-11-06
      • 2014-06-17
      相关资源
      最近更新 更多