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

Question

如何在窗口小部件上禁用默认的splash / ripple / ink效果？有时效果是不需要的，例如在下面的TextField案例中：

Answer 1

您可以将主题的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 2

根据上述@hunter的建议，我发现通过将主题中的highlightColor和splashColor都设置为Colors.transparent可以消除波纹。

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

Answer 3

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

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

Answer 4

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

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

Answer 5

当我在寻找一种从列表过度滚动中删除斜线的方法时，没有一个与ThemeData相关的解决方案对我有用。我以为这个问题与我遇到的问题相同，因此对于面临相同误解的任何用户，以下解决方案都行之有效，并且将其放入无状态小部件时也很整洁，如下所示：

class NoSplash extends StatelessWidget {
  NoSplash({this.child});

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return NotificationListener<OverscrollIndicatorNotification>(
        onNotification: (OverscrollIndicatorNotification overscroll) {
          overscroll.disallowGlow();
          return true;
        },
        child: child);
  }
}

使用此方法的方法是简单地用NoSplash（child：）包装小部件

希望有人觉得这有用！

Answer 6

使用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 7

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

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