如何去除滚动发光？

Question

默认情况下，flutter 在ListView/GridView/... 上添加发光效果以在安卓手机上滚动

我想完全或在一个特定的可滚动项上删除此效果。 我知道我可以更改 ScrollPhysics 以在 Bounce/Clamp 之间切换。但这实际上并没有消除发光效果。

我能做什么？

Answer 1

发光效果来自GlowingOverscrollIndicatorScrollBehavior添加

要移除此效果，您需要指定自定义ScrollBehavior。为此，只需将应用程序的任何给定部分包装到具有所需 ScrollBehavior 的 ScrollConfiguration 中。

以下ScrollBehavior 将完全移除发光效果：

class MyBehavior extends ScrollBehavior {
  @override
  Widget buildOverscrollIndicator(
      BuildContext context, Widget child, ScrollableDetails details) {
    return child;
  }
}

要移除整个应用程序的发光，您可以在MaterialApp 下添加它：

MaterialApp(
  builder: (context, child) {
    return ScrollConfiguration(
      behavior: MyBehavior(),
      child: child,
    );
  },
  home: new MyHomePage(),
);

要在特定的ListView 上删除它，而是只包装所需的ListView：

ScrollConfiguration(
  behavior: MyBehavior(),
  child: ListView(
    ...
  ),
)

---

如果你想改变效果，这也是有效的。就像在到达滚动视图的边界时添加淡入淡出一样。

Answer 2

通过将 ListView 的 physics 属性更改为 BouncingScrollPhysics 以模仿 iOS 上的 List 行为，发光将消失。

ListView.builder(
    physics: BouncingScrollPhysics(),
}

Answer 3

上述解决方案对我不起作用。我从另一个解决方案中做到了这一点。

用这个小部件包裹它以完全去除阴影：

NotificationListener<OverscrollIndicatorNotification>(
  onNotification: (overscroll) {
    overscroll.disallowGlow();
  },
  child: new ListView.builder(
    //Your stuff here. 
  ),
),

Answer 4

为我尝试这项工作，我为你工作

ScrollConfiguration(
          behavior: new ScrollBehavior()..buildViewportChrome(context, null, AxisDirection.down),
          child: SingleChildScrollView()
);

Answer 5

您可以包装您的 SingleChildScrollView 或 ListView。

NotificationListener<OverscrollIndicatorNotification>(
  onNotification: (OverscrollIndicatorNotification overscroll) {
    overscroll.disallowGlow();
    return;
  },
  child: SingleChildScrollView()
)

Answer 6

您可以尝试使用所有列表或网格或滚动视图的 BouncingScrollPhysics：

//ScrollView:
SingleChildScrollView(
      physics: BouncingScrollPhysics(),
)

//For ListView: 
ListView.builder(
    physics: BouncingScrollPhysics(),
}
//GridView
GridView.Builder(
    physics: BouncingScrollPhysics(),
)

Answer 7

你也可以试试

SingleChildScrollView(
      physics: ClampingScrollPhysics(),
)

Answer 8

如果您迁移到 null 安全，您可能会遇到行为问题。您可以使用这种适用于 null 安全性的方法：

NotificationListener<OverscrollIndicatorNotification>(
    onNotification: (OverscrollIndicatorNotification? overscroll) {
      overscroll!.disallowGlow();
      return true;
    },
  child: child,
),

Answer 9

2021 年更新

由于 buildViewportChrome 在 3 月 21 日 是 deprecated，我们可能有新的方法来实现它

A.工作解决方案

class MyCustomScrollBehavior extends MaterialScrollBehavior {

  @override
  Widget buildOverscrollIndicator(BuildContext context, Widget child, ScrollableDetails details) {
    return child;
  }
}

class MainApp extends StatelessWidget {
  const MainApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      title: 'App Title',
      home: HomeUI(),
    );
  }
}

B.说明

默认情况下，Flutter 将任何子小部件包装到 GlowingOverscrollIndicator 中，如下代码所示。

  @override
  Widget buildOverscrollIndicator(BuildContext context, Widget child, ScrollableDetails details) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
      case TargetPlatform.linux:
      case TargetPlatform.macOS:
      case TargetPlatform.windows:
        return child;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
        return GlowingOverscrollIndicator(
          axisDirection: details.direction,
          color: Theme.of(context).colorScheme.secondary,
          child: child, // < ----------  our Child Widget is wrapped by Glowing Indicator
        );
    }
  }

所以我们可以轻松地覆盖它，直接返回子元素而不将其包装到 GlowingOverscrollIndicator

class MyCustomScrollBehavior extends MaterialScrollBehavior {

  @override
  Widget buildOverscrollIndicator(
      BuildContext context, Widget child, ScrollableDetails details) {
    return child;
  }
}

Answer 10

您不需要构建自己的自定义 ScrollBehavior 类。相反，只需将可滚动小部件包装在 ScrollConfiguration 小部件中并将行为属性设置为：

const ScrollBehavior().copyWith(overscroll: false).

完整代码示例：

ScrollConfiguration(
                  behavior: const ScrollBehavior().copyWith(overscroll: false),
                  child: PageView(
                    physics: const PageScrollPhysics(),
                    controller: model.pageController,
                    children: [
                      PageOne(),
                      PageTwo(),
                      PageThree(),
                      PageFour(),
                    ],
                  ),
                ),

Answer 11

我用下面的一个作为没有滚动发光效果的滚动体

@override
  Widget build(BuildContext context) {

     return Scaffold(
          body: Center(
            child: ScrollConfiguration(
              behavior: new ScrollBehavior()
                ..buildViewportChrome(context, null, AxisDirection.down),
              child: SingleChildScrollView(