题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。
重要消息
本文章将讲述：
- 在 flutter 项目中 使用 flutter_custom_refresh_plugin 来解决 NestScrollView 与下拉刷新组件 RefreshIndicator 的冲突
flutter 实际应用开发中，我们会遇到如下场景
在这里插入图片描述
一般会使用 NestScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 还有下拉刷新组件 RefreshIndicator 来组合实可折叠头部的UI布局文件。 但是在使用官方的下拉刷新 RefreshIndicator发现没法使用，如果使用了折叠效果会消失。
原因是：
默认的RefreshIndicator要求它的子child必须是第一层的滑动组件它才其效果
页面Widget层级视图
解决方案之一是使用 custom_refresh_plugin点击查看github源码 插件
实现机制是：通过 NotificationListener 来实现兼听滑动距离实现逻辑判断刷新
1 添加依赖
配制文件中 pubspec.yaml
custom_refresh_plugin:
#git 方式依赖
git:
#仓库地址
url: https://github.com/zhaolongs/flutter_custom_refresh_plugin.git
# 分支
ref: master
2 为 NestedScrollView 添加下拉刷新
@override
Widget build(BuildContext context) {
return buildRootLayout();
}
Widget buildRootLayout() {
return Scaffold(
///可滑动的布局
body: CustomRefreshPage(
///子Widget
child:NestedScrollView(
.... 此处省略
),
///刷新控制器
customRefreshController:customRefreshController,
),
);
}
3 为 CustomRefreshController 下拉刷新控制器
3.1 创建 CustomRefreshController
声明成员变量
CustomRefreshController customRefreshController = new CustomRefreshController();
3.2 CustomRefreshController 设置兼听
CustomRefreshController customRefreshController = new CustomRefreshController();
@override
void initState() {
super.initState();
///设置下拉刷新兼听
///本方法 是当下拉滑动到一定的距离时会触发一次
customRefreshController.setOnRefreshListener(() {
print("兼听到开始刷新回调");
///这里使用的是模拟网络加载效果
Future.delayed(new Duration(milliseconds: 3000), () {
///结束刷新
customRefreshController.closeRefresh();
showCenterToast("已刷新");
});
});
///设置下拉滑动距离兼听
///[scrollPixe] 滑动距离兼听
///[totalScrollPixe] 总共可滑动的距离
///[toDown] true 向下滑动 false 向上滑动
customRefreshController.setOnScrollListener(
(double scrollPixe, double totalScrollPixe, bool toDown) {
},
);
///下拉刷新圆圈消失的回调方法
customRefreshController.setOnRefreshFinishListener((){
});
}
本小节完结，如有疑问可回复评论
