我有一个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: () {},
)
],
),
]
)
);
您可以使用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),
)
],
),
)
],
),
);
}
}