Flutter Web中PagedListView持续显示CircularProgressIndicator问题

核心问题1：首次请求未向pagingController添加数据 #

你的代码中仅当libraryAllContentResponse2.value.data != null时，才会调用appendPage/appendLastPage向分页控制器添加数据。但首次请求时libraryAllContentResponse2.value.data为null，走else分支只赋值了响应对象，却未将第一页数据注入pagingController，导致PagedListView因控制器无数据持续显示加载指示器。

核心问题2：itemBuilder未使用分页控制器维护的数据 #

你在itemBuilder中通过libraryAllContentResponse2.value.data!.rows![indexs]获取数据，但PagedListView已通过pagingController管理分页数据集，直接使用传入的item参数即可，既符合插件设计逻辑，也能避免本地列表与分页控制器数据不同步的问题。

核心问题3：isLastPage判断逻辑冗余 #

无需将列表长度转字符串再转回整数，直接对比数值即可完成判断。

修复后的控制器代码 #

final PagingController<int, dynamic> pagingControllerLibraryDetails = PagingController(firstPageKey: 1);

@override
void onInit() {
  super.onInit();
  // 添加分页请求监听器，滚动到底部自动触发下一页加载
  pagingControllerLibraryDetails.addPageRequestListener((pageKey) {
    getLibInsideContent(pageKey);
  });
  // 首次加载第一页数据
  getLibInsideContent(1);
}

Future<void> getLibInsideContent(int pages) async {
  try {
    SharedPreferences pref = await SharedPreferences.getInstance();
    libraryAllContentRequest.page = pages;
    libraryAllContentRequest.pageSize = 10;
    libraryAllContentRequest.loggedInUserID = pref.getString("userId");
    libraryAllContentRequest.query = Query(libraryId: libraryId.value);

    var res = await libraryProvider.getAllLibContent(libraryAllContentRequest.toJson());

    if (res.statusCode == 200) {
      try {
        LibraryAllContentResponse libraryAllContentResponse = LibraryAllContentResponse.fromJson(res.body);
        final currentRows = libraryAllContentResponse.data?.rows ?? [];
        final isLastPage = currentRows.length < 10;

        // 无论首次还是后续请求，都向分页控制器添加数据
        if (isLastPage) {
          pagingControllerLibraryDetails.appendLastPage(currentRows);
        } else {
          final nextPageKey = pages + 1;
          pagingControllerLibraryDetails.appendPage(currentRows, nextPageKey);
        }

        // 维护本地列表（按需保留）
        if (libraryAllContentResponse2.value.data == null) {
          libraryAllContentResponse2.value = libraryAllContentResponse;
        } else {
          currentRows.forEach((element) {
            if (!libraryAllContentResponse2.value.data!.rows!.contains(element)) {
              libraryAllContentResponse2.value.data!.rows!.add(element);
            }
          });
        }
      } on Exception catch (e) {
        // 加载失败时通知分页控制器，终止加载状态
        pagingControllerLibraryDetails.error = e;
      }
    } else {
      Get.snackbar('加载失败', '请求异常');
      pagingControllerLibraryDetails.error = Exception('请求状态码异常');
    }
  } on Exception catch (e) {
    pagingControllerLibraryDetails.error = e;
  }
}

@override
void onClose() {
  // 销毁分页控制器，避免内存泄漏
  pagingControllerLibraryDetails.dispose();
  super.onClose();
}

修复后的UI代码 #

PagedListView<int, dynamic>(
  pagingController: collectionController.pagingControllerLibraryDetails,
  shrinkWrap: true,
  builderDelegate: PagedChildBuilderDelegate<dynamic>(
    itemBuilder: (context, item, index) {
      // 直接使用分页控制器传递的item数据
      return Text(item.categoryName.toString());
    },
    noItemsFoundIndicatorBuilder: (_) => CollectionEmptyScreen(),
  ),
)

额外注意事项 #

• 加载失败时必须调用pagingControllerLibraryDetails.error = e，否则加载指示器会一直处于显示状态。
• 无需在外部回调中手动调用getLibInsideContent(1)，通过onInit中的监听器或直接调用即可完成首次加载。

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