如何移除Material风格PageView组件中的水波纹效果？

你遇到的问题其实很常见——直接给PageView套无波纹主题没生效，是因为PageView的水波纹通常来自它的子组件（比如每个页面里的Material、InkWell等可交互元素），而不是PageView本身。下面给你两种靠谱的解决方案：

方案一：使用Flutter内置的无波纹工厂（推荐，Flutter 2.0+可用） #

Flutter已经内置了NoSplash.splashFactory，不需要自己写复杂的自定义类。你只需要给PageView（或者它的子组件）包裹一个Theme，将splashFactory设置为NoSplash.splashFactory，同时可以把highlightColor设为透明，避免点击高亮：

Theme(
  data: Theme.of(context).copyWith(
    splashFactory: NoSplash.splashFactory,
    highlightColor: Colors.transparent, // 移除点击高亮效果
  ),
  child: PageView(
    children: [
      // 你的页面子组件示例
      Container(color: Colors.red),
      Container(color: Colors.blue),
      Container(color: Colors.green),
    ],
  ),
)

如果子组件里还有单独的可交互元素（比如按钮），你可以单独给这些元素套Theme，避免影响全局其他组件的交互反馈。

方案二：自定义无波纹工厂（兼容旧版本Flutter） #

如果你用的是较旧的Flutter版本，没有内置NoSplash，可以继续用你之前的自定义类，但需要调整使用方式：要把无波纹主题应用到PageView的每个子页面，而不是只套在PageView外层。因为PageView本身不会产生水波纹，波纹来自子页面里的可交互组件。

修改后的使用代码：

PageView(
  children: [
    NoSplashContainer(Container(color: Colors.red)),
    NoSplashContainer(Container(color: Colors.blue)),
    NoSplashContainer(Container(color: Colors.green)),
  ],
)

同时可以简化你的自定义类，去掉冗余参数：

import 'package:flutter/material.dart';

class NoSplashContainer extends StatelessWidget {
  final Widget child;

  const NoSplashContainer(this.child, {super.key}) : assert(child != null);

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        splashFactory: const NoSplashFactory(),
        highlightColor: Colors.transparent,
      ),
      child: child,
    );
  }
}

class NoSplashFactory extends InteractiveInkFeatureFactory {
  const NoSplashFactory();

  @override
  InteractiveInkFeature create({
    required MaterialInkController controller,
    required RenderBox referenceBox,
    Offset? position,
    Color? color,
    bool containedInkWell = false,
    RectCallback? rectCallback,
    BorderRadius? borderRadius,
    double? radius,
    VoidCallback? onRemoved,
  }) {
    return NoSplash(
      controller: controller,
      referenceBox: referenceBox,
    );
  }
}

class NoSplash extends InteractiveInkFeature {
  NoSplash({
    required super.controller,
    required super.referenceBox,
  });

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

为什么之前的方法没生效？ #

• 修改全局ThemeData的splashColor为透明会影响整个应用，而且水波纹的底层实现不一定只依赖splashColor，所以会出现异常的透明黑色波纹。
• 只给PageView外层套NoSplashContainer，子组件的Theme并没有被覆盖——因为Flutter的Theme是向下传递的，但如果子组件本身有自己的Theme（比如Material组件会继承全局Theme），需要直接给子组件套无波纹Theme才能生效。

内容的提问来源于stack exchange，提问作者Senior-Jesticle