如何在 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,
                          )),
                    ),

谢谢您的帮助

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为圆形。

默认情况下，效果会尝试填充空间，因此为了修改大小，我在所有边添加了填充，裁剪效果。如果您仍然无法完全呈现涟漪效应，那么将您的代码包装在 a 中Material()应该可以解决大多数问题，或者查看应用程序主题。

Answer 2

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

注意：
这里我使用SVG 插件来使用我想要的SVG图标（放置在 asset/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),
)

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

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