button - 如何在 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 将其裁剪为圆形。

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