🍉 加载中...


Flutter 技巧之移除滚动视图（ScrollView）中的拖拽溢出效果

2 minute read
,

前言

滚动视图中的拖拽溢出效果，出自 ScrollBehavior 添加的 GlowingOverscrollIndicator 组件。要禁止此效果，只需要通过 ScrollConfiguration 指定一个自定义 ScrollBehavior 即可。

如有需要，可以在自定义 ScrollBehavior 中覆盖 buildViewportChrome 方法，以实现自定义拖拽溢出效果。另外，如上文所述，默认 ScrollBehavior 在 Android 中的拖拽溢出效果，是由 GlowingOverscrollIndicator 绘制的（IOS 中默认的拖拽溢出效果与 Android 不一样）。

自定义 ScrollBehavior

1class MyBehavior extends ScrollBehavior {
2    @override
3    Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
4        return child;
5    }
6}

全局移除（整个应用）

1MaterialApp( 
2    builder: (context, child) { 
3        return ScrollConfiguration(
4            behavior: MyBehavior(),  // 花重点关注这里
5            child: child, 
6        ); 
7    }, 
8    home: new MyHomePage(), 
9);

局部移除

要在特定的 ListView 上进行移除，只需使用 ScrollConfiguration 将目标 ListView 包装起来即可：

1// 注意下面代码并不完整，只是为了演示
2ScrollConfiguration(
3    behavior: MyBehavior(),
4    child: ListView(
5        ...
6    ),
7);

旁门左道

通过在 ListView 或 SingleChildScrollView 上添加 NotificationListener，并在其中调用 disallowGlow 来移除发光效果：

1NotificationListener<OverscrollIndicatorNotification>(
2  onNotification: (OverscrollIndicatorNotification overscroll) {
3    overscroll.disallowGlow();
4    return false;
5  },
6  // 注意下面代码并不完整，只是为了演示
7  child: SingleChildScrollView()
8)

参考资料