Flutter 如何去除BottomNavigationBarItem及PageView的灰色遮罩层

问题效果截图：

1. 去除BottomNavigationBarItem长按灰色遮罩 #

该灰色遮罩是Material组件默认的交互响应效果，可通过两种方式修改：

• 局部生效（仅作用于当前BottomNavigationBar）
  用Theme组件包裹BottomNavigationBar，将高亮、水波纹色设为全透明：

  Theme(
    data: ThemeData(
      highlightColor: Colors.transparent,
      splashColor: Colors.transparent,
      // 彻底禁用水波纹可加下面这行
      // splashFactory: NoSplash.splashFactory,
    ),
    child: BottomNavigationBar(
      // 保持原有配置不变
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
      ],
    ),
  )
  

• 全局生效（整个应用所有BottomNavigationBar通用）
  直接在MaterialApp的主题配置中修改：

  MaterialApp(
    theme: ThemeData(
      bottomNavigationBarTheme: const BottomNavigationBarThemeData(
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
      ),
    ),
    home: const HomePage(),
  )
  

2. 去除PageView滚动边界灰色遮罩 #

该遮罩是Android平台默认的滚动越界微光效果，同样支持局部和全局修改：

• 局部生效（仅作用于当前PageView）
  用ScrollConfiguration包裹PageView，禁用越界指示器：

  ScrollConfiguration(
    behavior: ScrollConfiguration.of(context).copyWith(
      overscrollIndicatorColor: Colors.transparent,
    ),
    child: PageView(
      // 保持原有配置不变
      children: const [
        FirstPage(),
        SecondPage(),
      ],
    ),
  )
  

• 全局生效（作用于所有滚动组件，含ListView、GridView、PageView等）
  在MaterialApp的builder中全局配置滚动行为：

  MaterialApp(
    builder: (context, child) {
      return ScrollConfiguration(
        behavior: ScrollConfiguration.of(context).copyWith(
          overscrollIndicatorColor: Colors.transparent,
        ),
        child: child!,
      );
    },
    home: const HomePage(),
  )
  

内容的提问来源于stack exchange，提问作者bd_28