題記
—— 執(zhí)劍天涯什湘，從你的點滴積累開始猫胁，所及之處，必精益求精剂买，即是折騰每一天。
重要消息
本文章將講述：
- 在 flutter 項目中 使用 flutter_custom_refresh_plugin 來解決 NestScrollView 與下拉刷新組件 RefreshIndicator 的沖突
flutter 實際應用開發(fā)中癌蓖，我們會遇到如下場景
在這里插入圖片描述
一般會使用 NestScrollView 結(jié)合 SliverAppBar 與 TabBar 瞬哼、TabBarView 還有下拉刷新組件 RefreshIndicator 來組合實可折疊頭部的UI布局文件。 但是在使用官方的下拉刷新 RefreshIndicator發(fā)現(xiàn)沒法使用租副，如果使用了折疊效果會消失坐慰。
原因是：
默認的RefreshIndicator要求它的子child必須是第一層的滑動組件它才其效果
頁面Widget層級視圖
解決方案之一是使用 custom_refresh_plugin點擊查看github源碼 插件
實現(xiàn)機制是：通過 NotificationListener 來實現(xiàn)兼聽滑動距離實現(xiàn)邏輯判斷刷新
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 創(chuàng)建 CustomRefreshController
聲明成員變量
CustomRefreshController customRefreshController = new CustomRefreshController();
3.2 CustomRefreshController 設置兼聽
CustomRefreshController customRefreshController = new CustomRefreshController();
@override
void initState() {
super.initState();
///設置下拉刷新兼聽
///本方法 是當下拉滑動到一定的距離時會觸發(fā)一次
customRefreshController.setOnRefreshListener(() {
print("兼聽到開始刷新回調(diào)");
///這里使用的是模擬網(wǎng)絡加載效果
Future.delayed(new Duration(milliseconds: 3000), () {
///結(jié)束刷新
customRefreshController.closeRefresh();
showCenterToast("已刷新");
});
});
///設置下拉滑動距離兼聽
///[scrollPixe] 滑動距離兼聽
///[totalScrollPixe] 總共可滑動的距離
///[toDown] true 向下滑動 false 向上滑動
customRefreshController.setOnScrollListener(
(double scrollPixe, double totalScrollPixe, bool toDown) {
},
);
///下拉刷新圓圈消失的回調(diào)方法
customRefreshController.setOnRefreshFinishListener((){
});
}
本小節(jié)完結(jié)，如有疑問可回復評論
