flutter - IconButton的波纹效果出现在widget下方
问题描述
我有一个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: () {},
)
],
),
]
)
);
解决方案
您可以使用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),
)
],
),
)
],
),
);
}
}
推荐阅读
- mlflow - 指定 backend-store-uri 后,mlflow 跟踪服务器未启动
- c++ - 获取从 QTableWidget 中的单元格小部件发出的信号发送器的行索引
- exchange-basicauth - MS 在 2020 年关闭 Exchange Online 的基本身份验证
- ios - 如何创建处理 RawRepresentable 值的自定义集合下标
- postgresql - 在 PostgreSQL 中查找四分位数
- bash - 为什么重定向在我的 shell 脚本中不起作用?
- containers - 是否可以将集群容器化?
- react-apollo - React 上的 Apollo 客户端 - 如何检索错误信息?
- mongodb - 从 mongodb 聚合中获取深层嵌套数组并包含在结果中
- sorting - 如何在 SolR 中按可用性日期排序(并赋予权重)