Flutter中如何禁用Scroll Glow滚动光晕？

问题描述 #

我是Flutter新手，目前遇到一个问题：无法在自己编写的代码中移除/禁用Scroll Glow滚动光晕。我试过现有所有解决方案，但都没有效果，不知道原因是什么。请问有没有人知道该如何解决这个问题？

我的代码 #

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("Fertigungsrechner"),
        backgroundColor: const Color.fromRGBO(20, 20, 20, 10.0),
      ),
      backgroundColor: const Color.fromRGBO(00, 00, 00, 50),
      body: Container(
        padding: const EdgeInsets.all(0.0), //Abstand Kacheln von Seitenrand
        child: GridView.count(
          crossAxisCount: 2,
          children: <Widget>[
            MyMenu(
              path: "/rpm",
              title: "RPM",
              icon: Icons.abc_rounded,
              warna: Colors.white,
            ),
          ],
        ),
      ),
    );
  }
}

解决方案 #

方法一：用ScrollConfiguration局部/全局禁用光晕

将GridView（或整个页面组件）包裹在ScrollConfiguration中，通过自定义滚动行为关闭过度滚动指示器：

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("Fertigungsrechner"),
        backgroundColor: const Color.fromRGBO(20, 20, 20, 10.0),
      ),
      backgroundColor: const Color.fromRGBO(00, 00, 00, 50),
      body: ScrollConfiguration(
        behavior: ScrollBehavior().copyWith(overscroll: false),
        child: Container(
          padding: const EdgeInsets.all(0.0),
          child: GridView.count(
            crossAxisCount: 2,
            children: <Widget>[
              MyMenu(
                path: "/rpm",
                title: "RPM",
                icon: Icons.abc_rounded,
                warna: Colors.white,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

如果需要全局生效，直接在MaterialApp的scrollBehavior参数中设置该行为即可，无需给每个滚动组件单独配置。

方法二：用NotificationListener拦截过度滚动通知

通过监听OverscrollIndicatorNotification并阻止光晕触发：

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("Fertigungsrechner"),
        backgroundColor: const Color.fromRGBO(20, 20, 20, 10.0),
      ),
      backgroundColor: const Color.fromRGBO(00, 00, 00, 50),
      body: Container(
        padding: const EdgeInsets.all(0.0),
        child: NotificationListener<OverscrollIndicatorNotification>(
          onNotification: (notification) {
            notification.disallowIndicator();
            return false;
          },
          child: GridView.count(
            crossAxisCount: 2,
            children: <Widget>[
              MyMenu(
                path: "/rpm",
                title: "RPM",
                icon: Icons.abc_rounded,
                warna: Colors.white,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

方法三：调整滚动物理（配合前两种方法使用）

针对iOS平台的弹性滚动特性，可设置滚动物理为ClampingScrollPhysics()，弱化弹性效果，配合前两种方法彻底移除光晕：

GridView.count(
  physics: const ClampingScrollPhysics(),
  crossAxisCount: 2,
  // 其他参数保持不变
)

注意事项 #

如果之前的方案没生效，大概率是因为没有正确包裹目标滚动组件——需要确保ScrollConfiguration或NotificationListener直接包裹GridView，而非嵌套在多层容器之外。

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