【Flutter 问题系列第 13 篇】Flutter 如何去掉 TabBar 点击时的阴影以及波纹效果_flutter tabbar 去掉点击效果

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

你在使用 TabBar 组件的时候是否遇到过这样的情况，如下所示演示图

点击标签栏的时候会有阴影以及波纹效果，看起来不太美观，怎么去掉这个呢 ？

有一个巧妙的方法，就是在 TabBar 组件外层套一个 Theme 组件，设置其 data 属性即可，关键代码如下

Theme(
  data: ThemeData(
    splashColor: Colors.transparent, // 点击时的水波纹颜色设置为透明
    highlightColor: Colors.transparent, // 点击时的背景高亮颜色设置为透明
  ),
  child: TabBar(
  	...
  ),
)
1
2
3
4
5
6
7
8
9

修改后的动态效果演示图如下

当然，这种方式不仅可以去掉 TabBar 点击时的阴影，凡是被其包括着并且设置透明色的，比如包着 Scaffold，则在 Scaffold 中的组件，都会失去点击时的效果。

这些都是局部设置的，如果你想全局设置，我之前的有一篇博客也说了全局去除点击时的阴影以及波纹效果，有兴趣的可以 点此跳转 。

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

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

---

结束语

Google 的 Flutter 越来越火，截止 2021年4月17日 GitHub 标星已达 86K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。