Question

我想使用Icon制作一个带有圆形波纹效果的按钮，我在网上看到了一些东西，但是我做不到。这不是应该的那样直接。现在尝试使用此代码。

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,
                          )),
                    ),

感谢您的帮助

Answer 1

它对我有用，以上所有解决方案都制作了方形阴影而不是圆形

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

Answer 2

在第一个代码段中，您包裹在InkWell中的代码段不是圆形的，我想您想要的是圆形效果。

您可以直接使用IconButton，而不用InkWell包裹它。

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

Answer 3

我使用了没有背景的FAB。

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

Answer 4

您可以简单地使用具有constraints和shape属性的 RawMaterialButton 来创建具有色调和圆形背景的图标。
另外，您可以禁用shape属性以使其具有矩形按钮。

注意：
在这里，我使用了SVG Plugin来使用所需的 SVG 图标（位于资产/图标文件夹中），但是您可以简单地使用任何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),
)

Answer 5

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

将 Material Widget 添加为 paret 对我有用

Answer 6

用InkWell小部件包裹Material小部件，而material小部件应该有颜色。

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

Answer 7

我看到您希望对波纹的大小进行精细控制。我最终使用了下面的代码。

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()中，这样可以解决大多数问题，或者着眼于应用程序主题。

Answer 8

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

如果使用IconButton不适用于您，请按以下说明进行操作。

TLDR：不要在父容器中设置背景，而让Material来做是在背景上绘制波纹。

Answer 9

你需要用透明的背景颜色包裹它的材质小部件：

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

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

Answer 10

我遇到了涟漪效应不适用于 IconButton 答案和 Inkwell 答案的问题。

事实证明这与背景颜色无关，但我的 onPressed 处理程序中的某些内容取消了涟漪效应。也许是另一个动画。

这可以通过在 onPressed 内部放置 200 毫秒的延迟来确认，然后涟漪效应又回来了。

如何在IconButton上产生圆形波纹效果？

11 个答案: