Flutter中切换城市时如何触发pull_to_refresh刷新获取对应数据

前置准备 #

首先你需要先持有pull_to_refresh包提供的RefreshController控制器实例，和你的SmartRefresher组件绑定：

• 声明并初始化控制器

// 页面状态类中声明
late RefreshController _refreshController;

@override
void initState() {
  super.initState();
  // 初始化控制器，默认不自动刷新
  _refreshController = RefreshController(initialRefresh: false);
}

@override
void dispose() {
  // 页面销毁时释放控制器
  _refreshController.dispose();
  super.dispose();
}

• 绑定到SmartRefresher组件

SmartRefresher(
  controller: _refreshController,
  onRefresh: () => _loadMedicalList(true),
  onLoading: () => _loadMedicalList(false),
  child: /* 你的列表组件 */,
)

抽离通用列表请求逻辑 #

把你的列表请求逻辑抽成可复用方法，区分刷新/加载更多两种场景，自动处理页码和列表数据状态：

// 通用请求方法，isRefresh标记是否为刷新操作
Future<void> _loadMedicalList(bool isRefresh) async {
  if (isRefresh) {
    // 刷新场景：重置页码为第一页，清空旧城市的列表数据
    providerPageNumber.resetPageNumber();
    medicalListViewModel.clearExistingList();
  } else {
    // 加载更多场景：页码自增1
    providerPageNumber.incrementPageNumber();
  }

  try {
    MedicalListModel result = await medicalListViewModel.fetchMedicalListPerCity(
      cityID: currentSelectedCityId, // 取当前选中的城市ID
      pageNumber: providerPageNumber.getPageNumber,
    );

    if (isRefresh) {
      // 刷新成功：赋值新列表数据，重置刷新状态和加载更多状态
      medicalListViewModel.medicalList = result.data;
      _refreshController.refreshCompleted();
      _refreshController.resetNoData();
    } else {
      // 加载更多成功：追加列表数据
      medicalListViewModel.medicalList.addAll(result.data);
      // 无更多数据时标记加载无数据状态
      if (result.data.isEmpty) {
        _refreshController.loadNoData();
      } else {
        _refreshController.loadComplete();
      }
    }
  } catch (err) {
    // 请求失败处理状态
    if (isRefresh) {
      _refreshController.refreshFailed();
    } else {
      _refreshController.loadFailed();
    }
  }
}

切换城市时触发刷新 #

在城市选择的回调方法中，更新当前选中城市ID后，调用控制器的requestRefresh方法即可主动触发刷新逻辑：

// 城市选择回调
void onCityChange(String newCityId) {
  currentSelectedCityId = newCityId;
  // 主动触发下拉刷新，会自动执行onRefresh绑定的_loadMedicalList(true)逻辑
  _refreshController.requestRefresh();

  // 如果你不需要展示下拉刷新的动画，也可以直接调用请求方法，效果一致
  // _loadMedicalList(true);
}

内容的提问来源于stack exchange，提问作者Abdullah Khudher