IconButton的涟漪效果出现在小部件下方。

Question

我有一个名为Container的小部件和一个IconButton。当我按下IconButton时，涟漪效果会出现在Container后面。有没有办法解决这个问题？

这里是Github Gist中的完整类。

Container(
  height: height,
  decoration: _cardBoxDecoration(Colors.white),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            icon: Icon(
              FontAwesomeIcons.checkCircle,
              color: _checkGrey,
              size: 20,
            ),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(
              Icons.more_horiz,
              color: _grey,
              size: 20,
            ),
            onPressed: () {},
          )
        ],
      ),
    ]
  )
);

- Burak

---

你想完全移除涟漪效果吗？ - Viren V Varasadiya

@VirenVVarasadiya 显然，他想在容器范围内看到涟漪效果，而不是超出容器范围。 - Andrey Gordeev

我想在容器边界内看到涟漪效果，就像@AndreyGordeev所说的那样。 - Burak

Answer 1

您可以使用Material小部件来得到您想要的输出。将Container小部件替换为Material小部件。

class _AppointmentsCart extends StatelessWidget {
  final double height;

  _AppointmentsCart({this.height});

  @override
  Widget build(BuildContext context) {
    return Material( // replace container widget
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(
                  FontAwesomeIcons.checkCircle,
                  color: _grey,
                  size: 20,
                ),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(
                  Icons.more_horiz,
                  color: Colors.grey,
                  size: 20,
                ),
                onPressed: () {},
              )
            ],
          ),
          Padding(
            padding: EdgeInsets.only(left: 15),
            child: Text(
              'Today',
              style: TextStyle(fontSize: 18),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(15),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  '5',
                  style: TextStyle(fontSize: 24, color: _titleGrey),
                ),
                Text(
                  'Appoinemts',
                  style: TextStyle(fontSize: 12, color: _subtitleGrey),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

- Amit Jangid