如何在Flutter中调整图标/图标按钮的大小？

Question

我有两个问题。

1. 如何缩放我们的图标？我的意思是不是Flutter中默认的图标，而是当您将其更改为图像时。我有一个带有图像的图标按钮，类似于这样：

Row(
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          IconButton(
                            icon: new Image.asset("images/IG.png"),
                          ),
                          IconButton(
                            icon: new Image.asset("images/Twitter.png"),
                          ),
                          IconButton(
                            icon: new Image.asset("images/Fb.png"),
                          ),
                        ],
                      )

只有3个图标。当我添加更多图标时，它们会变成黄黑相间的砖块。如何使它们变小？

2. 上面的问题是针对IconButton的。 如何将图标更改为图片？ 以下是代码：

   Icon(Icons.star, color: Colors.red)

如何使用Image.asset将'star'更改为图像？ 不参考其他链接，仅显示图标。

- Roman Traversine

Answer 1

你可以使用 size 属性来设置 Icon 的大小。

Icon(
  Icons.radio_button_checked,
  size: 12,
),

对于IconButton，您可以使用

Transform.scale(
  scale: 0.5,
  child: IconButton(
    onPressed: (){},
    icon: new Image.asset("images/IG.png"),
  ),
),

- CopsOnRoad

---

那我使用缩放来调整这些图标的大小吗？ 好的，让我试试，非常感谢您的回答 :) @CopsOnRoad - Roman Traversine

对于普通的 Icon，您可以使用 size，但对于带有自己图像的 IconButton，您应该使用 scale。请慢慢来，如果有帮助，请告诉我。谢谢 :) - CopsOnRoad

是的。如果是普通图标，我可以使用“SIZE”，但在图标按钮情况下我卡在这里了。这是我第一次知道图标按钮需要使用“SCALE”。感谢您的回答，真的帮了我很多。 :) - Roman Traversine

Answer 2

以下代码设置了IconButton的宽度和高度，并使其居中于您的容器中。

 Container(
            height: 18.0,
            width: 18.0,
            color: Colors.yellow,
            child: new IconButton(
              padding: new EdgeInsets.all(0.0),
              color: Colors.red,
              icon: new Icon(Icons.clear, size: 18.0),
              onPressed: null,
            )
        )

输出：

（注：该段文字为格式要求，无需翻译）

- Jitesh Mohite

Answer 3

对于第一个问题，您可以使用SizedBox来包含IconButton，如果添加更多时出现问题，可以使用滚动或根据子元素减小SizedBox的宽度和高度。

new SizedBox(
   height: /*calculate from width and no:of child*/,
   width: /*calculate from width and no:of child*/,
   child: new IconButton(
      padding: new EdgeInsets.all(0.0),
      icon: new Image.asset("images/IG.png"),
      onPressed: null,
   )
)

对于第二个问题，您可以使用AssetImage('icons/heart.png', package: 'my_icons')，您可以参考文档

- Vineeth Mohan

---

非常感谢您的回答，帮助我找到解决方案。但是像CopsOnRoad所说，您的代码对于IconButton不起作用。我已经尝试过了。再次感谢您，@Vineeth Mohan - Roman Traversine

Answer 4

我将根据All Suhu在此处的答案以及我的经验向谷歌大叔提问来回答我的问题。

1. 如何缩放我们的图标？我的意思是不是Flutter中的默认图标，而是当您将其更改为图像时。

mr @CopsOnRoad已在评论栏中给出了他的答案。它确实有效。谢谢 :) 我的答案：

Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Image.asset("images/line.png", width: 30,),
                          SizedBox(width: 5,),
                          Image.asset("images/Wa.png", width: 30,),
                          SizedBox(width: 5,),
                          Image.asset("images/IG.png", width: 30,),
                          SizedBox(width: 5,),
                          Image.asset("images/Twitter.png", width: 30,),
                          SizedBox(width: 5,),
                          Image.asset("images/Fb.png", width: 30,),

                        ],

我使用图像资源并给它们一个大小来调整大小。 但这只是愚蠢的方法。您可以看到Cops先生上面的好方法。

2. 如何使用图像更改图标？以下是代码： Icon(Icons.star, color: Colors.red)

我的答案是使用ImageIcon。它使图像就像图标一样。以下是代码。

  ImageIcon(AssetImage("images/Free Ongkir.png")),

因为我仍然无法将“星”更改为图像资源，所以我使用了ImageIcon。

您也可以通过在第一个“）”后添加“大小”来更改大小。

希望这可以帮助你：）

- Roman Traversine