Question

我有一个 ListView.builder 小部件，它返回一个来自 API 的列表视图。这个 API 有分页，所以我添加了一个滚动监听器来监听滚动到第一页项目的底部，然后调用 API 加载下一页数据。

  void _scrollListener() {
if (controller.position.maxScrollExtent == controller.position.pixels) {
  loadMoreData();
}}

我使用 provider 作为我的状态管理方法。所以当我需要加载更多数据时，应用程序调用提供者模型中的 API 并将数据添加到列表（构建 ListView.buider 的列表）。

Container(
        child: AbsorbPointer(
      absorbing: contactsModel.isLoading,
      child: Container(
        child: Column(
          children: [
            Container(
                padding:
                    EdgeInsets.only(top: 20.0, left: 22.0, right: 22.0),
                width: w,
                child: searchPeopleField),
            Expanded(
              child: !contactsModel.isLoading
                  ? Stack(
                      children: [
                        Container(
                          child: contactsModel.allContacts.isNotEmpty
                              ? ListView.separated(
                                  controller: controller,
                                  scrollDirection: Axis.vertical,
                                  separatorBuilder:
                                      (BuildContext context, int index) =>
                                          Divider(
                                              height: 3,
                                              color: kBlack029,
                                              indent: 20,
                                              endIndent: 20),
                                  padding: const EdgeInsets.all(8),
                                  itemCount:
                                      contactsModel.allContacts.length,
                                  itemBuilder:
                                      (BuildContext context, int index) {
                                    return contactListView(
                                        context,
                                        index,
                                        contactsModel.allContacts,
                                        flag,
                                        baseUrl,
                                        urlLoad,
                                        widget.isFromAct,
                                        highlightText);
                                  })
                              : Center(
                                  child: contactsModel.isFromSearch
                                      ? UpsNoData()
                                      : noAPIData(w, h),
                                ),
                        ),
                        Visibility(
                            visible: contactsModel.isLoading,
                            child: Center(
                              child: progressIndicator(h),
                            )
                        )
                      ],
                    )
                  : Center(child: progressIndicator(h)),
            ),

这就是我的 UI 为这个功能工作的方式。我的问题是当我向下滚动并加载更多数据时，它会将下一页数据添加到列表中。但它会刷新页面并返回列表顶部。观看下面的视频。

click to see video(GIF)

我该如何解决这个问题？我希望列表能够从它开始加载更多数据的位置滚动。

  paginatingContactsList(context,step) async {
checkNetworkStatus(context).then((value) async {
  if (value == true) {
    isLoading = true;
    notifyListeners();
    await paginateContactsData(http.Client(), context,step).then((res) {
      resData = res;
      if(res != null && res.data != null) {
        for(var items in res.data){
          allContacts.add(items);
        }
      }
      isLoading = false;
      notifyListeners();
    });
    isFromSearch = false;
    notifyListeners();
  } else {
    Toast.show('Offline'.tr(), context,
        duration: 2, backgroundColor: Colors.redAccent);
  }
});

}

Flutter：向列表中添加更多项目时，ListView.builder 分页页面刷新

0 个答案: