如何去除滚动发光？

Posted 2023-02-23

【中文标题】如何去除滚动发光？

【英文标题】：How to remove scroll glow?

【发布时间】：2018-12-09 17:09:22

【问题描述】：

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

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

我能做什么？

【问题讨论】：

你可以使用 BouncingScrollPhysics()。

【参考方案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(
    ...
  ),
)

---

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

【讨论】：

如何在 ios 上移除过度滚动？

@TheRedhat 我刚刚在这里回答了你的问题，你可以看看如何去除过度滚动***.com/questions/58645048/…

避免扩展ScrollBehavior 的另一种可能的解决方案是在OverscrollIndicatorNotification 上扩展至disallowGlow()。见这里：***.com/a/53154780/7621577

能否请您添加完整的示例或 Git 代码？

因为我有 addCustomer 表单页面并且我使用了 SingleChildScrollview 所以我在哪里添加这个代码？

【参考方案2】：

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

ListView.builder(
    physics: BouncingScrollPhysics(),

【讨论】：

ScrollablePositionedList.builder 的任何解决方案，将不胜感激。谢谢。

【参考方案3】：

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

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

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

【讨论】：

它可以工作，但是如果这个小部件在另一个滚动小部件中，你必须包装到滚动小部件父级。

ScrollablePositionedList.builder 的任何解决方案将不胜感激。谢谢。

@Kamlesh 抱歉，ScrollablePositionedList.builder 的菜鸟。我建议您提出一个新问题以引起社区的关注。

好的，亲爱的 Bensal，谢谢，我将对这个主题进行更多研究，如果我没有得到任何适当的解决方案，我将发布一个新问题。再次感谢:)

对我来说添加一个适用于 pageview NotificationListener( onNotification: (overscroll) overscroll.disallowGlow(); return true; , child: new ListView.builder( //Your stuff在这里。), ),

【参考方案4】：

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

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

【讨论】：

这是做什么的？ behavior 参数需要 ScrollBehavior 类型，因此您传入默认的 ScrollBehavior() 但调用其 buildViewportChrome 方法一次，并忽略其返回值并使用 .. 语法强制“返回自我”，这将如何与简单地传入behavior: ScrollBehavior()不同？

【参考方案5】：

您可以包装您的 SingleChildScrollView 或 ListView。

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

【讨论】：

您必须返回 true 或 false 以避免空安全错误。

【参考方案6】：

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

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

//For ListView: 
ListView.builder(
    physics: BouncingScrollPhysics(),

//GridView
GridView.Builder(
    physics: BouncingScrollPhysics(),
)

【讨论】：

ScrollablePositionedList.builder 的任何解决方案，将不胜感激。谢谢。

感谢兄弟提供此代码

【参考方案7】：

你也可以试试

SingleChildScrollView(
      physics: ClampingScrollPhysics(),
)

【讨论】：

ScrollablePositionedList.builder 的任何解决方案，将不胜感激。谢谢。

【参考方案8】：

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

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

【讨论】：

良好的 null 安全实践到底在哪里？ overscroll?.disallowGlow();

ScrollablePositionedList.builder 的任何解决方案，将不胜感激。谢谢。

@egorikem 如果您将项目迁移到空安全，您可能希望代码不可为空，否则您会收到错误。

【参考方案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;
  

【讨论】：

完美，感谢您的出色解决方案！

【参考方案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(),
                    ],
                  ),
                ),

【参考方案11】：

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

@override
  Widget build(BuildContext context) 

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