logo标签列表

如何在Flutter中调整IconButton的大小（高度和宽度）

flutter
74

在Flutter中如何调整IconButton的大小（高度和宽度）？似乎它采用默认的宽度和高度。没有高度或宽度属性。

new IconButton(
    padding: new EdgeInsets.all(0.0),
    color: themeData.primaryColor,
    icon: new Icon(Icons.clear, size: 18.0),
    onPressed: onDelete,
)
8个回答
135
你可以使用SizedBox来强制调整大小。
SizedBox(
   height: 18.0,
   width: 18.0,
   child: IconButton(
      padding: EdgeInsets.all(0.0),
      color: themeData.primaryColor,
      icon: Icon(Icons.clear, size: 18.0),
      onPressed: onDelete,
   )
)
1
这会使图标变粗还是只增加 IconButton 本身的区域？IconButton 的一个令人烦恼的问题是您无法删除默认填充。 - Michael Tolsma
50

有一种比已接受答案更新的方法。它看起来像这样：

IconButton(
  iconSize: 18.0,
  icon: new Icon(Icons.clear)

所以使用iconSize属性并去掉SizedBox即可。

我注意到旧的已被接受的解决方案在按下按钮时具有不良绘图效果。

32
iconSize属性只会改变图标本身的大小，而不会改变它的容器（实际上是一个SizedBox）。因此，我认为改变按钮的尺寸的唯一方法是提供自己的SizedBox包装器，就像被采纳的答案建议的那样。 - Aleksej Shovgenja
15
这是不正确的。它并没有改变按钮的大小，只是图标而已。 - Ian Wilkinson
如果您将图标添加到IconButton中，则可以更改按钮的大小。我之前一直在更改图标本身的大小，这意味着很多图标超出了iconButton的范围。确保在iconButton上放置iconSize可以解决此问题。 - Tom
5
人们是否误解了这个问题？很明显，这是最正确的做法。说这是不正确的人一定是在使用 Icon 的 size 属性，而不是 IconButton 的 iconSize 属性。 - Alex Hartford
1
使用其它方法比使用sizebox更好。 - IFTEKHAR I ASIF
29

您可以使用InkWell替换IconButton：

InkWell(
    child: Icon(Icons.clear, size: 18.0, color: themeData.primaryColor),
    onTap: onDelete,
),
23

使用IconButton上的constraints属性：

IconButton(
    constraints: BoxConstraints(maxHeight: 36),
    icon: new Icon(Icons.clear, size: 18.0),
)

源代码

9
如果有人想要更改图标按钮的闪烁/悬停阴影大小，您需要在 IconButton 中设置 splashRadius 属性为所需值。
IconButton(
     splashRadius: 12,
     padding: EdgeInsets.zero,
     icon: Icon(
             Icons.visibility,
              color: Theme.of(context).primaryColorDark,
    ),
)
5
使用 IconButton > splashColor 属性。
IconButton(
  // use this to decrease/increase the splash spacing
  splashRadius: 24.0,  // (Material.defaultSplashRadius = 35.0)
  color: buttonColor,
  icon: Icon(Icons.heart),
  onPressed: () {},
);

demo iconbutton

1
非常被低估的答案！ - Ashkan Sarlak
2

IconButton的命中区域是能够感知用户交互的区域，它的最小尺寸为kMinInteractiveDimension（48.0），无论图标的实际大小如何。

0
如果您使用来自资产文件夹的图像，则以下内容应该有效：
IconButton(
      icon: Image.asset(
        "assets/images/play_3x.png",
        height: 100,
        width: 100,
        color: Colors.white,
)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接