【Flutter】使用ScrollController配合EasyRefresh实现列表预加载:在还未滑动到底部时加载下一页数据

需求/背景

在我们的业务场景中,列表的加载使用easy_refresh组件:

https://pub.dev/packages/easy_refresh

大概效果是往上滑动到一定的offset会触发一个上滑加载,可以触发一些网络请求拉取列表后面的数据来展示。

这种模式一般在一页翻完以后,才会触发加载,此时需要等待加载完以后才能看到新的数据。现在的需求是,想要在即将滑到当前页面底部的时候,预先加载后面的数据,这样表面上看来没有了中间的等待感,可以提升用户体验

思路

首先easy_refresh组件没有提供"预加载"相关的参数,所以我们需要自己去实现。分析需求,我们如何得知触发预加载的这个时机呢?可以比较容易的想到,如果可以监听到滑动的距离,那么就可以根据滑动距离触发加载,比如当监听到用户已经上滑了约一个手机高度那么高(一页)时,触发预加载。

监听滑动的offset,可以联想到使用ScrollController实现。

用法

dart 复制代码
double _currentOffset = 0; // 记录上一次触发了预加载的位置
ScrollController scrollController; // 列表controller,赋给用于展示元素的ListView
EasyRefreshController refreshController = EasyRefreshController(controlFinishLoad: true, controlFinishRefresh: true); // EasyRefresh组件的controller设置

在对应位置监听scrollController:

dart 复制代码
scrollController.addListener(() => preLoad());

preLoad方法:

dart 复制代码
  /// 通过检查当前滑动的位置触发加载.
  void preLoad() async {
    if (scrollController.offset - _currentOffset > appHeight) {
      _currentOffset = scrollController.offset;
      if (!isNoMore) {
        await updateItems();  // 加载一页数据
      }
      if (isNoMore) refreshController.finishLoad(IndicatorResult.noMore);
    }
  }
  • isNoMore:

    判断是否为最后一页,不同的业务场景可能不一样,我是根据拉取的数据数量是否小于我要求的数量来判断的,比如我请求api的时候要拉取20条数据,如果此时返回的不足20条,则说明已经拉到了最后一页。

  • refreshController:

    赋给EasyRefresh组件,这里要finishLoad是因为,在EasyRefresh组件中也有onLoad回调,原本的上拉加载和预加载是同时要有的,为了避免预加载到最后一页,再上滑的时候又发多余的请求,在这里需要及时将加载状态设为IndicatorResult.noMore。

  • appHeight: 屏幕高度,如果项目里面有使用Getx,则计算方式为:

    dart 复制代码
    double appHeight = View.of(Get.context!).physicalSize.height / Get.pixelRatio;

    这里使用appHeight作为判断标准,是与业务相关的,这个时候根据我们api的速度等情况,上滑起来比较丝滑:即当往上滑动了一个屏幕这么多的距离时,触发预加载。这个参数可以根据实际情况设置的大一点或小一点。

相关推荐
火柴就是我19 小时前
flutter 之真手势冲突处理
android·flutter
Speed12319 小时前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间19 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭19 小时前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
玲珑Felone20 小时前
从flutter源码看其渲染机制
android·flutter
ALLIN2 天前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei2 天前
Flutter 国际化
flutter
Dabei2 天前
Flutter MQTT 通信文档
flutter
Dabei2 天前
Flutter 中实现 TCP 通信
flutter
孤鸿玉2 天前
ios flutter_echarts 不在当前屏幕 白屏修复
flutter