如何在Flutter中禁用默认的Widget飞溅效果？

Question

如何在Widget上禁用默认的splash/ripple/ink效果？有时效果是不需要的,例如在以下TextField案例中:

Answer 1

您可以将组件包装到Theme并设置属性splashColor和highlightColor透明ThemeData

Theme(
  data: ThemeData(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  child: YourWidget(),
);

Answer 2

使用NoSplash.splashFactory

设置主题

final yourTheme = ThemeData.light();
...
Theme(
  data: yourTheme.copyWith(
    splashFactory: NoSplash.splashFactory,
  ),
  ...
)

设置为材质小部件

ElevatedButton(
  style: ElevatedButton.styleFrom(
    splashFactory: NoSplash.splashFactory,
  ),
  onPressed: () { },
  child: Text('No Splash'),
)

Answer 3

根据以上@hunter的建议，我发现通过在主题中同时设置highlightColor和splashColor来Colors.transparent消除波纹。

我确实担心设置highlightColor可能会产生连锁反应，但是我还没有注意到。

Answer 4

您可以将主题替换为splashFactory不绘制任何内容的主题:

class NoSplashFactory extends InteractiveInkFeatureFactory {
  const NoSplashFactory();

  @override
  InteractiveInkFeature create({
    @required MaterialInkController controller,
    @required RenderBox referenceBox,
    @required Offset position,
    @required Color color,
    bool containedInkWell: false,
    RectCallback rectCallback,
    BorderRadius borderRadius,
    double radius,
    VoidCallback 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: new Theme(
  data: new ThemeData(splashFactory: const NoSplashFactory()),
  child: new TextField(...),
),

最初由HansMuller在GitHub PR上回答.

Answer 5

我已经尝试了上面的答案，但没有成功（splashColor: Colors.transparent, highlightColor: Colors.transparent,）。

我的解决方案是只设置hoverColor:Colors.transparent

Answer 6

我将修改 Camilo 的方法，以确保我们不会覆盖父主题的其他属性。

var color = Colors.transparent;
Theme(
  data: Theme.of(context).copyWith(
    highlightColor: color,
    splashColor: color,
    hoverColor: color,
  ),
  child: YourWidget(),
)

Answer 7

highlightColor在您的材质应用程序主题中将、设置splashColor为透明并splashFactory设置为NoSplash ，如下所示。

MaterialApp(
   theme: ThemeData(
      highlightColor: Colors.transparent,
      splashColor: Colors.transparent,
      splashFactory: NoSplash.splashFactory,,
    )
 )