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

Question

我有一个 Container 小部件和一个 IconButton。当我按下 IconButton 时，Container 后面会显示涟漪效果。有办法解决这个问题吗？

Here是完整的类，如 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: () {},
          )
        ],
      ),
    ]
  )
);

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),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}