如何去除卷轴发光？

默认情况下，flutter 会在 ListView/GridView/... 上增加一个发光效果，用于安卓手机的超卷

我想删除这个效果完全或对一个特定的滚动条。 我知道我可以改变 ScrollPhysics之间的弹跳/钳改变。但这并不实际上消除发光效果。

我能做什么？

enter image description here

79474 次浏览
小开
最佳答案

辉光效应来自于 ScrollBehavior添加的 GlowingOverscrollIndicator

要消除此效果，需要指定一个自定义 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(
...
),
)

这也是有效的，如果你想 改变的效果。比如在到达滚动视图边框时添加渐变。

小开

为我试试这个工作，为你试试这个工作

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

我已经使用了下面一个滚动体没有滚动辉光效果

@override
Widget build(BuildContext context) {


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

可以包装 SingleChildScrollView 或 ListView。

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

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

用这个小部件包装它，完全去除阴影:

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

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

ListView.builder(
physics: BouncingScrollPhysics(),
}
小开

你也可以试试

SingleChildScrollView(
physics: ClampingScrollPhysics(),
)
小开

如果迁移到 null 安全，则可能会出现行为问题。您可以使用这个与 null 安全性一起工作的方法:

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

你可以用所有的列表、网格或者 scrollview 来尝试 BouncingScrollPhysical:

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


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

二零二一年最新情况

由于 buildViewportChrome 是 1921年3月上的 不赞成，我们可能有新的方法来实现这一点

工作解决方案

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

解释

默认情况下，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;
}
}
小开

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

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(),
],
),
),
小开

在 Flutter 2.10更新之后，上一个 NotificationListener 参数代码已被删除/弃用。 新准则

NotificationListener<OverscrollIndicatorNotification>(
onNotification: ((overscroll) {
overscroll.disallowIndicator(); //previous code overscroll.disallowGlow();
return true;
}),
child: ListView(
padding: const EdgeInsets.symmetric(
horizontal: 15, vertical: 15),
scrollDirection: Axis.horizontal,
children: List.generate(
items.length,
(index) => Padding(
padding: const EdgeInsets.only(right: 15),
child: AspectRatio(
aspectRatio: 13 / 9,
child:
LayoutBuilder(builder: (context, boxcon) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.black12,
spreadRadius: 5,
blurRadius: 12)
],
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(items[index])),
color: greengradientcolor,
),
);
}),
))),
),
),
小开

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

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

例如:

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

`

仅仅改变滚动行为并不是一个好的做法，因为在不同的设备上运行应用程序时，您可能会失去原生的滚动感觉。


提交答案