如何去除Flutter IconButton的大间距？

Question

如何去除Flutter IconButton的大间距？

flutterbuttonflutter-layoutflutter-widgeticonbutton

119

我想要一排IconButtons，都挨在一起，但是实际图标和IconButton边界之间有相当大的填充。我已经将按钮上的填充设置为0。

这是我的组件，非常直观：

class ActionButtons extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Container(
        color: Colors.lightBlue,
        margin: const EdgeInsets.all(0.0),
        padding: const EdgeInsets.all(0.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            IconButton(
              icon: new Icon(ScanrIcons.reg),
              alignment: Alignment.center,
              padding: new EdgeInsets.all(0.0),
              onPressed: () {},
            ),
            IconButton(
              icon: new Icon(Icons.volume_up),
              alignment: Alignment.center,
              padding: new EdgeInsets.all(0.0),
              onPressed: () {},
            )
          ],
        ),
      );
    }
}

我想要缩小大部分浅蓝色空间，让我的图标开始位置更靠左且彼此更接近，但我找不到调整IconButton本身大小的方法。

我几乎可以确定这个空间被按钮本身占据了，因为如果我将它们的对齐方式更改为 centerRight 和 centerLeft，它们会变成这样:

实际上使图标更小也没有帮助，按钮仍然很大:

感谢您的帮助。

- Pablote

你尝试过将实际图标放大吗？看起来图标可能是居中的，但在图标字形中没有填满它的空间。 - Deborah

7

使用GestureDetector( onTap: () {}, child: new Icon(Icons.volume_up) )。（翻译：Use GestureDetector函数，其中onTap参数是一个空函数，child参数为新的音量图标Icon(Icons.volume_up)。） - Shyju M

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- linyi102 · Answer 1

我喜欢以下方式：

InkWell(
  borderRadius: BorderRadius.circular(50),
  onTap: () {},
  child: Container(
    padding: const EdgeInsets.all(8),
    child: const Icon(Icons.favorite, color: Colors.red),
  ),
),

在此输入图片描述

- Pavel · Answer 2

要显示水波纹效果，请使用 InkResponse：

InkResponse(
  Icon(Icons.volume_up),
  onTap: ...,
)

如果需要，可以更改图标大小或添加填充：

InkResponse(
  child: Padding(
    padding: ...,
    child: Icon(Icons.volume_up, size: ...),
  ),
  onTap: ...,
)