使用过
ListView
的读者们应该了解到ListView
的一个特性,即若ListView
在滚动至顶部或底部后继续滚动,组件中将会出现一条带有默认主体颜色的波纹。在某些情况下,我们为了美观并不希望显示过度滚动波纹,这个时候我们应该怎么操作呢?
💻 方法一 配置一个 ScrollConfiguration
第一步 定义一个 ScrollBehavior
class _OverScrollBehavior extends ScrollBehavior {
@override
Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
if (getPlatform(context) == TargetPlatform.android || getPlatform(context) == TargetPlatform.fuchsia) {
return GlowingOverscrollIndicator(
child: child,
showLeading: false,
showTrailing: false,
axisDirection: axisDirection,
color: Theme.of(context).accentColor,
);
} else {
return child;
}
}
}
第二步 将 ScrollBehavior 配置到 ScrollConfiguration 中
class Demo extends StatelessWidght {
@override
Widget build(BuildContext context) {
return ScrollConfiguration(
behavior: _OverScrollBehavior(),
child: ListView(
...
),
);
}
}
是不是觉得如果每个 ListView 都需要单独封装的话未免也太麻烦了点?
没关系,已经帮你们想到了!作者已经帮你们封装好了现成的仓库,我们只需要直接调用就行!
💻 方法二 直接使用现成第三方库 noripple_overscroll(推荐)
第一步 进入 pub.dev 查看依赖的最新版本
进入依赖的仓库主页后,检查到最新的依赖版本。
截止至文章发布,版本为 0.0.2第二步 安装依赖
dependencies:
noripple_overscroll: ^0.0.2 # 具体版本因依赖版本发布而异,具体参见 Pub 仓库
第三步 引入依赖并使用
这个依赖使用非常简单,我们只需要将需要取消显示波纹的ListView传入即可。
class _NorippleDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return NoRippleOverScroll( // 调用 NoRippleOverScroll
child: ListView( // 传入 ListView
...
),
);
}
}
做到这里,波纹已经被取消了。
网友评论