如何删除滚动发光？

Question

默认情况下,flutter会在ListView/ GridView/ ...上为Android手机上的过度滚动添加一个发光效果

我想完全或在一个特定的可滚动上删除此效果.我知道我可以改变ScrollPhysicsBounce/Clamp之间的变化.但这实际上并没有消除发光效果.

我能做什么 ？

Answer 1

光晕效果来自GlowingOverscrollIndicator通过添加ScrollBehavior

要删除此效果,您需要指定自定义ScrollBehavior.为此,只需将应用程序的任何给定部分包装到ScrollConfiguration所需的部分即可ScrollBehavior.

以下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

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

ListView.builder(
    physics: BouncingScrollPhysics(),
}

Answer 3

您不需要构建自己的自定义 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 4

2021 年更新

由于 buildViewportChrome已于3 月 21 日被弃用，我们可能有新的方法来实现这一点

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 5

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

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

您可以包装您的 SingleChildScrollView 或 ListView。

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

Answer 9

当前接受的答案在当前版本的 Flutter 中已经过时。

滚动行为的ScrollBehavior.copyWith()方法有一个overscroll标志，可以将其设置为 false 以避免必须创建自己的 ScrollBehavior 类。

例如：

ScrollConfiguration(
    behavior: MaterialScrollBehavior().copyWith(overscroll: false),
    child : someScrollableWidget
)

`

仅更改滚动行为并不是一个好习惯，因为在不同设备上运行应用程序时，您可能会失去本机滚动感觉。

Answer 10

你也可以试试

SingleChildScrollView(
      physics: ClampingScrollPhysics(),
)

Answer 11

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

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

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