【Flutter 问题系列第 3 篇】如何去除 Flutter 中点击按钮、底部导航栏的水波纹效果

这是【Flutter 问题系列第 3 篇】，如果觉得有用的话，欢迎关注专栏。

你是否遇到过在 Flutter 中，点击按钮或者底部导航栏的时候，出现下面的情况 有时候我们并不需要这种水波纹效果，该怎样取消呢？下面提供两种方式，一种全局设置，一种局部设置，大家根据自己的业务情况选择即可。

一：全局去除设置

找到 MaterialApp 组件，设置其 theme 属性如下

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      splashColor: Colors.transparent, // 点击时的高亮效果设置为透明
      highlightColor: Colors.transparent, // 长按时的扩散效果设置为透明
    ),
  );
}

这样在任何地方点击按钮或者底部导航栏，都不会再有水波纹效果了，效果图如下

二：局部去除设置

全局设置是一棍子解决问题，如果你需要某个组件去除水波纹效果的话，这就要用到局部设置了，

局部设置需要要求组件自带 splashColor 属性和 highlightColor 属性，比如 InkWell 、RaisedButton 等组件

局部修改的方式和全局修改的方式一样，都是修改 splashColor 属性和 highlightColor 属性，如下代码所示

InkWell(
	onTap: () {},
	child: Text('InkWell 组件', style: TextStyle(fontSize: 25)),
    highlightColor: Colors.transparent, // 透明色
    splashColor: Colors.transparent, // 透明色
),

需要说明的是，如果全局设置了去除水波纹效果，但是在局部中又设置了组件的 splashColor 属性和 highlightColor 属性，局部的会覆盖全局的。

另外，像 RaisedButton 类型的组件比较特殊，即使你设置了 splashColor 属性和 highlightColor 属性，点击时看着好像还是有水波纹效果，那是因为点击 RaisedButton 时还有阴影效果的属性在控制着，所以最终代码如下

RaisedButton(
	onPressed: () {},
    child: Text('按钮'),
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
    highlightElevation: 0, // 控制按钮下方阴影的大小，默认值为 8
    elevation: 0, // 凸起按钮下方阴影的大小，默认值为 2
),

也许还有其它的解决方式，如果你还有其它更好的，欢迎在评论区评论。

关于 如何去除 Flutter 中点击按钮、底部导航栏的水波纹效果，就简单说到这里，如果帮到了你，希望大家可以一键三连哦。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 Google 的 Flutter 越来越火，截止 2020年7月24日 GitHub 标星已达 59K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。