Android Flutter實現自定義下拉刷新組件

Posted on by

前言

在Flutter開發中官方提供瞭多平臺的下拉刷新組件供開發者使用，例如RefreshIndicator和CupertinoSliverRefreshControl分別適配Android和iOS下拉刷新交互形態。但實際情況中這兩者使用情況卻不太相同在使用場景就存在差異，RefreshIndicator作為嵌套型下拉組件列表內容作為它的child使用而CupertinoSliverRefreshControl是嵌入在Sliver列表中使用。同時對於交互設計來說一般更偏好RefreshIndicator下拉形式，通過下拉列表整體下移後透出拉下刷新組件樣式。

改造點

DIY下拉組件樣式

RefreshIndicator下拉組件樣式可能會在交互上不符合設計師要求。例如下拉過程中loading樣式出現交互是會和列表重合，實際需求可能是希望下拉過程中loading樣式和列表一樣同步下移出現。

因此修改原有的下拉刷新組件樣式構建，構建方法入參主要是refreshState、pulledExtent、refreshTriggerPullDistance、refreshIndicatorExtent。原邏輯中組件偏量是固定不變_kActivityIndicatorMargin值，因此下拉組件樣式是直接顯示出來的。

調整方案根據pulledExtent下拉距離，默認偏移下拉組件樣式自身高度加上下拉距離從而將偏移量從負方向向正方向展示。

 Widget buildRefreshIndicator(
      BuildContext context,
      RefreshIndicatorMode refreshState, //下拉狀態
      double pulledExtent, // 下拉實時距離
      double refreshTriggerPullDistance, // 下拉限制最大高度
      double refreshIndicatorExtent, // 下拉組件最大高度
      ) {
    return Container(
    color: Colors.deepOrange,
    child: Stack(
      clipBehavior: Clip.none,
      children: <Widget>[
        Positioned(
          top: -refreshIndicatorExtent + pulledExtent,
          left: 0.0,
          right: 0.0,
          //簡易的下拉樣式 忽略refreshState狀態
          child: Container(
            child: Text("我是下拉呀~~~~",style: TextStyle(color: Colors.white,fontSize: 20,),textAlign: TextAlign.center,),
          ),
        ),
      ],
    ),
  );
  }

刷新時機調整

RefreshIndicator下拉組件另外刷新觸發交互點也不是設計交互期望的邏輯，它的刷新觸發機制是隻要下拉超過設置下拉距離並會觸發。但實際開發中可能並不希望當到達對應點就去做刷新操作而是下拉到一定距離松手後才會觸發，因此需要改造下拉刷新組件內部的刷新機制。

原下拉刷新邏輯如下關鍵代碼所示，隻要當RefreshIndicatorMode.drag狀態下並且latestIndicatorBoxExtent > widget.refreshTriggerPullDistance時就會觸發下拉刷新方法。

  RefreshIndicatorMode transitionNextState() {
    RefreshIndicatorMode nextState;
。、、、 、、、 省略
      drag:
      case RefreshIndicatorMode.drag:
        if (latestIndicatorBoxExtent == 0) {
          return RefreshIndicatorMode.inactive;
        } else if (latestIndicatorBoxExtent < widget.refreshTriggerPullDistance) {
          return RefreshIndicatorMode.drag;
        } else {
          // 當latestIndicatorBoxExtent > widget.refreshTriggerPullDistance就執行
          if (widget.onRefresh != null) { //刷新邏輯執行點
            HapticFeedback.mediumImpact();
            SchedulerBinding.instance.addPostFrameCallback((Duration timestamp) {
              refreshTask = widget.onRefresh()..whenComplete(() {
                if (mounted) {
                  setState(() => refreshTask = null);
                  refreshState = transitionNextState();
                }
              });
              setState(() => hasSliverLayoutExtent = true);
            });
          }
          return RefreshIndicatorMode.armed;
        }
        break;
      case RefreshIndicatorMode.armed:
        if (refreshState == RefreshIndicatorMode.armed && refreshTask == null) {
          goToDone();
          continue done;
        }

        if (latestIndicatorBoxExtent > widget.refreshIndicatorExtent) {
          return RefreshIndicatorMode.armed;
        } else {
          nextState = RefreshIndicatorMode.refresh;
        }
        continue refresh;
      refresh:
      case RefreshIndicatorMode.refresh:
        if (refreshTask != null) {
          return RefreshIndicatorMode.refresh;
        } else {
          goToDone();
        }
        continue done;
      	、、、、、省略
    }

    return nextState;
  }

弱希望下拉松手後判斷是否觸發刷新隻修改RefreshIndicator下拉組件似乎無法直接滿足條件。因此需要結合手勢監聽來完成，需要對整體框架代碼做一個調整。

增加Listener嵌套監聽手勢抬起操作，獲取MagicSliverRefreshControlState（原是私有類放開為公有）判斷是否是超出下拉最小刷新間距，對內部是否可刷新標記進行賦值操作。

GlobalKey<MagicSliverRefreshControlState> key = GlobalKey<MagicSliverRefreshControlState>();

Listener(
      child: CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: <Widget>[
          MagicSliverRefreshControl(
            key: key,
            builder: buildRefreshIndicator,
            onRefresh: () async {
              print("<> SliverRefreshControl onRefresh start");
              await Future.delayed(Duration(seconds: 2),(){});
              print("<> SliverRefreshControl onRefresh end");
            },
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (content, index) {
                return Common.getWidget(index);
              },
              childCount: 100,
            ),
          )
        ],
      ),
      onPointerUp: (event){ //判斷是否可刷新操作
        if(key?.currentState?.isCanRefreshAction() ?? false){
          key?.currentState?.canRefresh = true;
        }else{
          key?.currentState?.canRefresh = false;
        }
      },
    );

RefreshIndicator組件內部增加一種新狀態RefreshIndicatorMode.over用來判斷是否刷新臨界狀態，結合外部手勢抬手監聽。當下拉超出刷新最小間距且抬手放開判斷觸發刷新操作，over恢復到drag還是進入armed都是通過以上條件來實現的，其他原邏輯保持不變。

switch (refreshState) {
      case RefreshIndicatorMode.inactive:
        if (latestIndicatorBoxExtent <= 0) {
          return RefreshIndicatorMode.inactive;
        } else {
          nextState = RefreshIndicatorMode.drag;
        }
        continue drag;
      drag:
      case RefreshIndicatorMode.drag:
        if (latestIndicatorBoxExtent == 0) {
          return RefreshIndicatorMode.inactive;
        }
        else if (latestIndicatorBoxExtent < widget.refreshTriggerPullDistance) {
          return RefreshIndicatorMode.drag;
        } else {
          return RefreshIndicatorMode.over; //增加一種狀態 表示下拉滿足刷新條件
        }
        break;
    	/// 進入新狀態後結合抬手後是否可刷新標記為判斷是進入刷新方法還是回到拖拽狀態
      case RefreshIndicatorMode.over:
        if (latestIndicatorBoxExtent <= widget.refreshTriggerPullDistance) {
          if(canRefresh){
            canRefresh = false; //將刷新標記置空復位
            if (widget.onRefresh != null) {
              HapticFeedback.mediumImpact();
              SchedulerBinding.instance.addPostFrameCallback((Duration timestamp) {
                refreshTask = widget.onRefresh()..whenComplete(() {
                  if (mounted) {
                    setState(() => refreshTask = null);
                    refreshState = transitionNextState();
                  }
                });
                setState(() => hasSliverLayoutExtent = true);
              });
            }
            return RefreshIndicatorMode.armed;
          }else{
            return RefreshIndicatorMode.drag;
          }
        }
        return RefreshIndicatorMode.over;
        break;

效果展示

具體代碼看這裡

調整前

調整後

以上就是Android Flutter實現自定義下拉刷新組件的詳細內容，更多關於Android Flutter下拉刷新的資料請關註WalkonNet其它相關文章！

推薦閱讀：