Question

我想为我的文本字段添加一个清除按钮。我找到了一个如何使用装饰添加它的示例，但是它的位置完全不对。如何调整图标的位置？

此外，我无法使输入文本在输入字段中居中。我没有找到如何使文本在输入框中垂直居中的任何内容。

谢谢！

...
TextEditingController _textFieldController = TextEditingController();
...

Widget searchField(BuildContext context) {

    return Container(
        width: 200,
        height: 30,
        color: Colors.grey[250],
        child: TextField(
          controller: _textFieldController,
          decoration: InputDecoration(
            suffix: IconButton(
              padding: EdgeInsets.all(0),
              alignment: Alignment.bottomLeft,
              icon: Icon(Icons.cancel),
              onPressed: _onClear,
            ),
            border: OutlineInputBorder(),
            hintText: 'Blablabla',
          ),
        ));
  }

Answer 1

将InputDecoration的填充减少为零。

             TextField(
               decoration: InputDecoration(
                              contentPadding: EdgeInsets.zero,

Answer 2

要实现所需的结果，需要进行三项更改：

使用suffixIcon代替suffix
删除垂直内容填充，例如contentPadding: EdgeInsets.only(left:5)用于在垂直方向上受限制的文本（例如，容器高度为30）垂直对齐。
删除IconButton中的填充： padding: EdgeInsets.zero以对齐图标。

完整的代码是：

return Container(
  width: 200,
  height: 30,
  color: Colors.grey[250],
  child: TextField(
    controller: _textFieldController,
    decoration: InputDecoration(
      contentPadding: EdgeInsets.only(left: 5),
      suffixIcon: IconButton(
        padding: EdgeInsets.zero,
        icon: Icon(Icons.cancel),
        onPressed: () => print("clear"),
      ),
      border: OutlineInputBorder(),
      hintText: 'Blablabla',
    ),
  )
);

最终结果：

Flutter TextField清除按钮位置错误

2 个答案: