題記

—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，即是折騰每一天。

本文章將講述：

在 flutter 項目中使用 flutter_custom_refresh_plugin 來解決 NestScrollView 與下拉刷新組件 RefreshIndicator 的衝突

flutter NestScrollview 下拉刷新效果圖

分析

flutter 實際應用開發中，我們會遇到如下場景

一般會使用 NestScrollView 結合 SliverAppBar 與 TabBar 、TabBarView 還有下拉刷新組件 RefreshIndicator 來組合實可摺疊頭部的UI佈局文件。但是在使用官方的下拉刷新 RefreshIndicator發現沒法使用，如果使用了摺疊效果會消失。

原因是：

默認的RefreshIndicator要求它的子child必須是第一層的滑動組件它才其效果

解決方案之一是使用 custom_refresh_plugin點擊查看github源碼插件

實現機制是：通過 NotificationListener 來實現兼聽滑動距離實現邏輯判斷刷新

1 添加依賴

配製文件中 pubspec.yaml

<code>custom_refresh_plugin:
  #git 方式依賴
  git:
    #倉庫地址
    url: https://github.com/zhaolongs/flutter_custom_refresh_plugin.git
    # 分支
    ref: master
/<code>

2 為 NestedScrollView 添加下拉刷新

<code>

@override
Widget build(BuildContext context) {
 return buildRootLayout();
}

Widget buildRootLayout() {
 return Scaffold(
   ///可滑動的佈局
   body: CustomRefreshPage(
     ///子Widget
     child:NestedScrollView(
       .... 此處省略
     ),
     ///刷新控制器
     customRefreshController:customRefreshController,
   ),
 );
}

/<code>

3 為 CustomRefreshController 下拉刷新控制器

3.1 創建 CustomRefreshController

<code>
CustomRefreshController customRefreshController = new CustomRefreshController();/<code>

3.2 CustomRefreshController 設置兼聽

<code>
 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((){
      
    });
    
    
  }
/<code>