你是否遇到过在 Flutter 中，点击按钮或者底部导航栏的时候，出现下面的情况
有时候我们并不需要这种水波纹效果，该怎样取消呢？下面提供两种方式，一种全局设置，一种局部设置，大家根据自己的业务情况选择即可。
一：全局去除设置
找到 MaterialApp 组件，设置其 theme 属性如下
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n1016" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
splashColor: Colors.transparent, // 点击时的高亮效果设置为透明
highlightColor: Colors.transparent, // 长按时的扩散效果设置为透明
),
);
} </pre>
这样在任何地方点击按钮或者底部导航栏，都不会再有水波纹效果了，效果图如下
[图片上传失败...(image-e84a61-1684585423911)]
二：局部去除设置
全局设置是一棍子解决问题，如果你需要某个组件去除水波纹效果的话，这就要用到局部设置了，
局部设置需要要求组件自带 splashColor 属性和 highlightColor 属性，比如 InkWell 、RaisedButton 等组件
局部修改的方式和全局修改的方式一样，都是修改 splashColor 属性和 highlightColor 属性，如下代码所示
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n1023" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">InkWell(
onTap: () {},
child: Text('InkWell 组件', style: TextStyle(fontSize: 25)),
highlightColor: Colors.transparent, // 透明色
splashColor: Colors.transparent, // 透明色
), </pre>
需要说明的是，如果全局设置了去除水波纹效果，但是在局部中又设置了组件的 splashColor 属性和 highlightColor 属性，局部的会覆盖全局的。
另外，像 RaisedButton 类型的组件比较特殊，即使你设置了 splashColor 属性和 highlightColor 属性，点击时看着好像还是有水波纹效果，那是因为点击 RaisedButton 时还有阴影效果的属性在控制着，所以最终代码如下
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n1026" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">RaisedButton(
onPressed: () {},
child: Text('按钮'),
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
highlightElevation: 0, // 控制按钮下方阴影的大小，默认值为 8
elevation: 0, // 凸起按钮下方阴影的大小，默认值为 2
), </pre>
也许还有其它的解决方式，如果你还有其它更好的，欢迎在评论区评论。
关于 如何去除 Flutter 中点击按钮、底部导航栏的水波纹效果，就简单说到这里，如果帮到了你，希望大家可以一键三连哦。
你的问题得到解决了吗？欢迎在评论区留言。
赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。
