Flutter禁用材料设计(Material Design)点击时的水波效果

如果比较熟悉材料设计(Material Design)的话，会发现里面有很多酷炫的效果，包括点击控件时，从手指的点击处向外扩散的水波效果。

Flutter也默认为我们的APP开发提供了材料设计的视图，但是会发现水波的展示有一些问题，特别是文本输入框TextField上面使用时。

下面是我遇到的问题截图：

当来回切换两个输入框时，发现有时输入框背后的水波扩散完后没有消失，导致如图的展示异常。

这是Flutter目前的一个Bug，如果你也遇到这种情况的话，有一种解决方式就是在这个输入框上禁用水波效果。

下面我们就来介绍如何禁用控件的水波效果：

创建两个类，进行主题(Theme)的自定义：

import 'package:flutter/material.dart';

class NoSplashFactory extends InteractiveInkFeatureFactory {
  const NoSplashFactory();

  @override
  InteractiveInkFeature create(
      {MaterialInkController controller,
      RenderBox referenceBox,
      Offset position,
      Color color,
      TextDirection textDirection,
      bool containedInkWell = false,
      rectCallback,
      BorderRadius borderRadius,
      ShapeBorder customBorder,
      double radius,
      onRemoved}) {
    return new NoSplash(
      controller: controller,
      referenceBox: referenceBox,
    );
  }
}

class NoSplash extends InteractiveInkFeature {
  NoSplash({
    @required MaterialInkController controller,
    @required RenderBox referenceBox,
  })  : assert(controller != null),
        assert(referenceBox != null),
        super(
          controller: controller,
          referenceBox: referenceBox,
        );

  @override
  void paintFeature(Canvas canvas, Matrix4 transform) {}
}

在需要禁用水波效果的控件上使用：

...
child: Theme(
    data: ThemeData(splashFactory: const NoSplashFactory()),
    child: TextField(
      ...                          
    ),
),
...

这也许仅是Flutter目前版本(1.2.1)的一个Bug，也许将来Flutter团队会修复这个问题。但是本篇文章也为我们自定义主题（Theme）提供了一种思路。

本文原创地址为：https://www.examplecode.cn/2019/03/28/flutter-disable-ripple/
转载请注明出处。

我的博客中关于Flutter的所有文章可以点击这里找到，欢迎关注！