当前位置：首页 > article >正文

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

article 2025/1/14 3:16:17

需求/背景

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

https://pub.dev/packages/easy_refresh

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

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

思路

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

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

用法

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

在对应位置监听scrollController:

scrollController.addListener(() => preLoad());

preLoad方法：

  /// 通过检查当前滑动的位置触发加载.
  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，则计算方式为：
```
double appHeight = View.of(Get.context!).physicalSize.height / Get.pixelRatio;
```
这里使用appHeight作为判断标准，是与业务相关的，这个时候根据我们api的速度等情况，上滑起来比较丝滑：即当往上滑动了一个屏幕这么多的距离时，触发预加载。这个参数可以根据实际情况设置的大一点或小一点。