快捷導(dǎo)航

Android Flutter實(shí)現(xiàn)自定義下拉刷新組件

更新時(shí)間：2022年08月24日 08:34:38 作者：JulyYu

在Flutter開發(fā)中官方提供了多平臺(tái)的下拉刷新組件供開發(fā)者使用。本文將改造一下這些組件，實(shí)現(xiàn)自定義的下拉刷新組件，感興趣的可以了解一下

前言

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

改造點(diǎn)

DIY下拉組件樣式

RefreshIndicator下拉組件樣式可能會(huì)在交互上不符合設(shè)計(jì)師要求。例如下拉過程中l(wèi)oading樣式出現(xiàn)交互是會(huì)和列表重合，實(shí)際需求可能是希望下拉過程中l(wèi)oading樣式和列表一樣同步下移出現(xiàn)。

因此修改原有的下拉刷新組件樣式構(gòu)建，構(gòu)建方法入?yún)⒅饕莚efreshState、pulledExtent、refreshTriggerPullDistance、refreshIndicatorExtent。原邏輯中組件偏量是固定不變_kActivityIndicatorMargin值，因此下拉組件樣式是直接顯示出來的。

調(diào)整方案根據(jù)pulledExtent下拉距離，默認(rèn)偏移下拉組件樣式自身高度加上下拉距離從而將偏移量從負(fù)方向向正方向展示。

 Widget buildRefreshIndicator(
      BuildContext context,
      RefreshIndicatorMode refreshState, //下拉狀態(tài)
      double pulledExtent, // 下拉實(shí)時(shí)距離
      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狀態(tài)
          child: Container(
            child: Text("我是下拉呀~~~~",style: TextStyle(color: Colors.white,fontSize: 20,),textAlign: TextAlign.center,),
          ),
        ),
      ],
    ),
  );
  }

刷新時(shí)機(jī)調(diào)整

RefreshIndicator下拉組件另外刷新觸發(fā)交互點(diǎn)也不是設(shè)計(jì)交互期望的邏輯，它的刷新觸發(fā)機(jī)制是只要下拉超過設(shè)置下拉距離并會(huì)觸發(fā)。但實(shí)際開發(fā)中可能并不希望當(dāng)?shù)竭_(dá)對應(yīng)點(diǎn)就去做刷新操作而是下拉到一定距離松手后才會(huì)觸發(fā)，因此需要改造下拉刷新組件內(nèi)部的刷新機(jī)制。

原下拉刷新邏輯如下關(guān)鍵代碼所示，只要當(dāng)RefreshIndicatorMode.drag狀態(tài)下并且latestIndicatorBoxExtent > widget.refreshTriggerPullDistance時(shí)就會(huì)觸發(fā)下拉刷新方法。

  RefreshIndicatorMode transitionNextState() {
    RefreshIndicatorMode nextState;
。、、、 、、、 省略
      drag:
      case RefreshIndicatorMode.drag:
        if (latestIndicatorBoxExtent == 0) {
          return RefreshIndicatorMode.inactive;
        } else if (latestIndicatorBoxExtent < widget.refreshTriggerPullDistance) {
          return RefreshIndicatorMode.drag;
        } else {
          // 當(dāng)latestIndicatorBoxExtent > widget.refreshTriggerPullDistance就執(zhí)行
          if (widget.onRefresh != null) { //刷新邏輯執(zhí)行點(diǎn)
            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;
  }

弱希望下拉松手后判斷是否觸發(fā)刷新只修改RefreshIndicator下拉組件似乎無法直接滿足條件。因此需要結(jié)合手勢監(jiān)聽來完成，需要對整體框架代碼做一個(gè)調(diào)整。

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

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組件內(nèi)部增加一種新狀態(tài)RefreshIndicatorMode.over用來判斷是否刷新臨界狀態(tài)，結(jié)合外部手勢抬手監(jiān)聽。當(dāng)下拉超出刷新最小間距且抬手放開判斷觸發(fā)刷新操作，over恢復(fù)到drag還是進(jìn)入armed都是通過以上條件來實(shí)現(xiàn)的，其他原邏輯保持不變。

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; //增加一種狀態(tài) 表示下拉滿足刷新條件
        }
        break;
    	/// 進(jìn)入新狀態(tài)后結(jié)合抬手后是否可刷新標(biāo)記為判斷是進(jìn)入刷新方法還是回到拖拽狀態(tài)
      case RefreshIndicatorMode.over:
        if (latestIndicatorBoxExtent <= widget.refreshTriggerPullDistance) {
          if(canRefresh){
            canRefresh = false; //將刷新標(biāo)記置空復(fù)位
            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;