Question

默认情况下，颤动会在ListView / GridView / ...上增加发光效果，从而在Android手机上过度滚动

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

我该怎么办？

Answer 1

发光效果来自GlowingOverscrollIndicator添加的ScrollBehavior

要消除此影响，您需要指定一个自定义ScrollBehavior。为此，只需将应用程序的任何给定部分包装到具有所需ScrollBehavior的{{3}}中即可。

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

class MyBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(
      BuildContext context, Widget child, AxisDirection axisDirection) {
    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

上述解决方案不适用于我。我是通过其他解决方案做到的。

使用此小部件将其包裹起来，以完全去除阴影：

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

Answer 3

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

ListView.builder(
    physics: BouncingScrollPhysics(),
}

Answer 4

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

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

Answer 5

你也可以试试

SingleChildScrollView(
      physics: ClampingScrollPhysics(),
)

Answer 6

您可以包装SingleChildScrollView或ListView。

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

Answer 7

我在下面使用了一种没有滚动发光效果的滚动体

@override
  Widget build(BuildContext context) {

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

Answer 8

我知道这不是这个问题的答案，但是在我看来，它对于正在寻找有关此主题的信息的人很有用。

因此，如果您对how to remove overscroll effect on ios感兴趣，请回答How to remove overscroll on ios?

Answer 9

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

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

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

Answer 10

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

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

Answer 11

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
        );
    }
  }

所以我们可以很容易地覆盖它，直接返回 child 而不将它包装到 GlowingOverscrollIndicator

class MyCustomScrollBehavior extends MaterialScrollBehavior {

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

如何清除滚动发光？

11 个答案:

2021 年更新

A.工作方案

B.说明