IconButton的涟漪效果出现在widget下方

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

Answer 1

您可以使用Material小部件来获取所需的输出。将ContainerWidget替换为MaterialWidget。

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