Flutter彻底去除水波纹效果，不来看看？

admin管理员组

文章数量:1516870

Flutter彻底去除水波纹效果，不来看看？

在使用flutter进行开发的时候，按钮等控件点击会有水波纹效果，这是MaterialApp的交互效果，但是很多从原生转到flutter开发的同学，可能很不习惯这样的效果，或者有时候不需要此效果，要怎么搞呢？

设置splashColor

最容易想到的是设置splashColor，如下：

floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),splashColor: Colors.blue,)

我们只需要设置可点击widget对应的splashColor的颜色和背景色相同就可以，此时水波纹效果还在，只不过我们视觉感知不到了而已。

但是这样设置，如果是在全局ThemeData设置splashColor，我们并不知道应该设置成什么颜色，因为可点击的widget每个都可能有自己的背景颜色，而如果每个widget自己设置splashColor，又显得很繁琐，那有没有一种彻底的方法，让我不再见到这烦人的波纹呢？看官且往下看！

深入源码，斩草除根

我们知道，水波纹的效果其实是 InkWell widget提供，上面提到的设置widget的splashColor，其实就是设置InkWell的splashColor而已。

class InkWell extends InkResponse {const InkWell({Key key,Widget child,GestureTapCallback onTap,GestureTapCallback onDoubleTap,GestureLongPressCallback onLongPress,GestureTapDownCallback onTapDown,...

查看源码可以看到InkWell继承自InkResponse，查看InkResponse的_InkResponseState中的_handleTapDown方法可以看到，点击的时候开启了水波纹：

  void _handleTapDown(TapDownDetails details) {_startSplash(details: details);if (widget.onTapDown != null) {widget.onTapDown(details);}}

进入_startSplash()方法中，发现在这里创建了InteractiveInkFeature类型的splash

void _startSplash({TapDownDetails details, BuildContext context}) {assert(details != null ||<

本文标签： Flutter彻底去除水波纹效果，不来看看