Flutter中如何移除点击RaisedButton时的涟漪效果?
问题背景
开发对话框功能时,点击关闭按钮会出现不需要的涟漪点击效果,预期交互为点击按钮直接关闭弹窗,无额外涟漪动效。
当前实现代码如下:
// Child 3 : Close Button Padding( padding: EdgeInsets.fromLTRB(width * .62, height * .153, 0, 0), child: RaisedButton( splashColor: Colors.white, hoverColor: Colors.blue, elevation: 0, onPressed: () { setState(() { Navigator.of(context).pop(); }); }, child: const Icon( Icons.close, color: Colors.black, ), color: Colors.transparent, ), ),
解决方法
涟漪效果是Flutter Material组件默认自带的水波纹交互反馈,可通过以下两种方式移除:
- 方法1:修改按钮的交互色值为透明
原有代码仅将splashColor设为白色,依然会显示白色波纹,需将点击相关的反馈色全部设为透明即可隐藏效果,同时Navigator.pop为路由出栈操作,不需要额外包裹setState,修改后代码如下:
// Child 3 : Close Button Padding( padding: EdgeInsets.fromLTRB(width * .62, height * .153, 0, 0), child: RaisedButton( splashColor: Colors.transparent, highlightColor: Colors.transparent, hoverColor: Colors.transparent, elevation: 0, onPressed: () { Navigator.of(context).pop(); }, child: const Icon( Icons.close, color: Colors.black, ), color: Colors.transparent, ), ),
- 方法2:使用无默认交互特效的组件替代RaisedButton
如果不需要Material按钮的自带交互特性,可直接用GestureDetector包裹关闭图标,从根源上不会产生涟漪效果,实现代码如下:
// Child 3 : Close Button Padding( padding: EdgeInsets.fromLTRB(width * .62, height * .153, 0, 0), child: GestureDetector( onTap: () { Navigator.of(context).pop(); }, child: const Icon( Icons.close, color: Colors.black, ), ), )
内容的提问来源于stack exchange,提问作者Arjun Malhotra
相关产品推荐
相关产品推荐

