如何在 IconButton 上实现圆形涟漪效果？

Question

我想用一个图标制作一个带有圆形涟漪效果的按钮，我在网上看到过一些东西，但我做不到。这并不像应该那样直截了当。现在正在尝试使用这段代码。

InkWell(
    onTap: () {},
    splashColor: Colors.red,
    highlightColor: Colors.white,
    child: new Icon(
        FontAwesomeIcons.chevronCircleUp,
        size: 100,
    ),
)

我尝试了另一种方法，但我不明白为什么它们不能完美地居中对齐。

Container(
    margin: EdgeInsets.all(0.0),
    height: 100.0,
    width: 100.0,
    child: new RaisedButton(
        padding: EdgeInsets.all(0.0),
        elevation: 100.0,
        color: Colors.black,
        highlightElevation: 0.0,
        onPressed: () {},
        splashColor: Colors.red,
        highlightColor: Colors.red,
        //shape: RoundedRectangleBorder e tutto il resto uguale
        shape: CircleBorder(
            side: BorderSide(color: Colors.black, width: 5),
        ),
        child: Icon(
            FontAwesomeIcons.chevronCircleUp,
            color: Colors.white.withOpacity(.8),
            size: 80,
        ),
    ),
),

感谢您的帮助

- Floris Marpepa

---

你能否编辑你的问题并提供一个你所寻找的例子？ - Miguel Ruivo

我只想让涟漪效果以圆形方式应用，而不是现在的正方形方式。我不明白为什么在第二段代码中它不能完美地将子元素居中。 - Floris Marpepa

Answer 1

我看到您想要更精细地控制涟漪的大小。 我最终使用了以下代码。

Padding(
    padding: EdgeInsets.all(8.0),
    child: InkWell(
        customBorder: new CircleBorder(),
        onTap: () {},
        splashColor: Colors.red,
        child: new Icon(
            Icons.arrow_back,
            size: 24,
            color: Colors.black,
        ),
    ),
)

InkWell效果会呈现出一个正方形，但是使用CircleBorder可以把它裁剪成圆形。

默认情况下，该效果尝试填充空间，因此为了修改大小，我在所有边缘上添加了内边距，从而裁剪了效果。如果你仍然有问题，即涟漪效果根本不会呈现，请将你的代码包装在Material()中以解决大部分问题，或者查看应用程序主题。

- Jackson Moore

---

customBorder: CircleBorder() 这是一个真正简洁的解决方案。 - RuslanBek

我想补充一下，如果涟漪效果在某个组件的下方呈现，比如使用filled=true装饰的TextField，那么Material是必需的。 - Volodymyr Buberenko

Answer 2

对我有效，所有上述解决方案都会产生一个正方形的阴影而不是圆形

 Material(
              color: Colors.transparent,
                shape: CircleBorder(),
                clipBehavior: Clip.hardEdge,
        child : Icon() )

- Omar Essam El-Din

Answer 3

将你的InkWell小部件包装在一个Material小部件内，Material小部件应该有一个颜色。

 Material( color: Colors.transparent,
 child: InkWell( onTap: () { print("tapped"); }, ) );

- Harsha pulikollu

---

你能告诉我为什么在第二段代码中它们也不能完美居中吗？ - Floris Marpepa

同时，波及效应被应用于一个正方形的框而不是像我想要的圆形。 - Floris Marpepa

@FlorisMarpepa：墨水效果从触摸位置开始，而不是从中心开始。 - Andrei Volgin

Answer 4

您可以使用带有constraints和shape属性的RawMaterialButton来创建具有色调颜色和圆形背景的图标。
此外，您可以禁用shape属性以获得矩形按钮。 注意：
这里我使用了一个SVG插件来使用我想要的SVG图标（放置在assets/icons文件夹中），但您也可以简单地使用任何Icon小部件替代它。

示例：

RawMaterialButton(
  onPressed: () {}, //do your action
  elevation: 1.0,
  constraints: BoxConstraints(), //removes empty spaces around of icon
  shape: CircleBorder(), //circular button
  fillColor: Color(0xffff6464), //background color 
  splashColor: Colors.amber, 
  highlightColor: Colors.amber, 
  child: SvgPicture.asset(
    "assets/icons/heart.svg",
    width: 24,
    height: 24,
  ),
  padding: EdgeInsets.all(8),
)

- Ghasem Sadeghi

---

如果不使用（约束条件），由于Flutter的默认宽度为88.0，请注意遵循此答案。 - Esmaeil Ahmadipour

它对我的问题完美地起作用了。谢谢！ - Burak

Answer 5

在第一个代码片段中，您将其包装在InkWell中，效果不是圆形的，我猜您想要圆形效果。

您可以直接使用IconButton，而无需使用InkWell进行包装。

IconButton(
        icon: Icon(FontAwesomeIcons.chevronCircleUp),
        iconSize: 100,
        onPressed: () {},
        splashColor: Colors.blue,
      ),

- mirkancal

---

是的，我尝试过这种方法，但它没有起作用。我只是复制并粘贴了你的确切代码，但只显示图标，没有任何涟漪效果。 - Floris Marpepa

好的，但是这个 gif 是否达到了你想要实现的效果呢？@FlorisMarpepa - mirkancal

我的页面是MaterialApp的主页，我尝试将您的代码包装在Material中。它给了我效果，但是背景也有一个白色正方形。所以我将颜色参数设置为Colors.transparent，现在可以了，但涟漪变成了正方形而不是圆形。Material( color: Colors.transparent, child: IconButton( icon: Icon(FontAwesomeIcons.chevronCircleUp), iconSize: 100, onPressed: () {}, splashColor: Colors.blue, ), ), - Floris Marpepa

我认为如果你有一个设置了背景的容器，涟漪效果将在这个背景之后。这是我已经想到的。 - Boy

只需使用 Material 小部件包装 IconButton 即可。 - Michał Dobi Dobrzański

Answer 6

我使用了没有背景的 FAB。

FloatingActionButton(
  onPressed: () {},
  backgroundColor: Colors.transparent,
  mini: true,
  child: Icon(
    Icons.more_vert,
    color: Colors.white,
  ),
)

- Matthias Bruns

---

添加“elevation: 0.0”以去除阴影。 - Ashish Khurange

Answer 7

Material(
  child: IconButton(
    icon: Icon(
      FontAwesomeIcons.search,
    ),
    onPressed: () {},
  ),
)

将 Material Widget 添加为父级对我有效

- Ary Arfani

---

你好，欢迎来到SO！虽然这段代码可能回答了问题，但提供关于它如何以及为什么解决问题的额外上下文会提高答案的长期价值。请阅读tour和如何撰写优秀答案？。 - Tomer Shetah

Answer 8

            CircleAvatar(
                backgroundColor: Colors.grey[200],
                child: IconButton(
                  icon: Icon(
                    Icons.search,
                    color: Colors.black,
                  ),
                  onPressed: () {},
                ),
              ),

- SardorbekR

Answer 9

https://github.com/flutter/flutter/issues/3782

如果使用IconButton不能正常工作，这里有一些解释。

简而言之：不要将背景设置为父容器，让Material在背景上绘制涟漪效果。

- AAverin

Answer 10

你需要使用透明背景色来包装Material小部件：

Container(
    child:Material(
        color: Colors.transparent
        child: IconButton(
            icon: Icon(Icons.heart),
            onPressed: (){}
        ),
    ),
);

源链接: https://github.com/flutter/flutter/issues/61811#issuecomment-660630611

- Murat Kurbanov

---

这看起来方方正正的，很丑陋。这个答案有更好的设计品味。 - Michael