如何删除 Flutter IconButton 大填充? [英] How do I remove Flutter IconButton big padding?

问题描述

我想要一排 IconButtons，彼此相邻，但在实际图标和 IconButton 限制之间似乎有相当大的填充.我已经将按钮上的填充设置为 0.

I want to have a row of IconButtons, all next to each other, but there seems to be pretty big padding between the actual icon, and the IconButton limits. I've already set the padding on the button to 0.

这是我的组件，非常简单:

This is my component, pretty straightforward:

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 本身大小的方法.

I want to get rid of most of the light blue space, have my icons start earlier on the left, and closer to each other, but I can't find the way to resize the IconButton itself.

我几乎可以肯定这个空间是由按钮本身占据的，因为如果我将它们的对齐方式更改为 centerRight 和 centerLeft 它们看起来像这样:

I'm almost sure this space is taken by the button itself, 'cause if I change their alignments to centerRight and centerLeft they look like this:

缩小实际图标也无济于事，按钮仍然很大:

Making the actual icons smaller doesn't help either, the button is still big:

感谢您的帮助

推荐答案

那里没有填充那么多.IconButton 是一个 Material Design 小部件，它遵循可点击对象需要为 每边至少 48px. 您可以从任何 IDE 中单击进入 IconButton 实现.

It's not so much that there's a padding there. IconButton is a Material Design widget which follows the spec that tappable objects need to be at least 48px on each side. You can click into the IconButton implementation from any IDEs.

您也可以简单地获取 icon_button.dart 源代码并制作自己的 IconButton，它不遵循 Material Design 规范，因为整个文件只是组成其他小部件并且只有 200 行，其中大部分是注释.

You can also semi-trivially take the icon_button.dart source-code and make your own IconButton that doesn't follow the Material Design specs since the whole file is just composing other widgets and is just 200 lines that are mostly comments.

这篇关于如何删除 Flutter IconButton 大填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！