You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.27 02:48:38