如何正确实现无限滚动分页

huangapple go评论77阅读模式
英文:

How to implement infinite scroll pagination the right way

问题

以下是您要翻译的内容:

I am making a search request but the data returned comes with a pagination type. I have in my onchanged function in my TextField so that whenever I type something, it makes a get request. The first letter I type works fine but when I type again, nothing happens.

This is what I have in my onChanged function

onChanged: (value) {
      _pagingController.addPageRequestListener(
      (pageKey) {
      _fetchPage(pageKey, val.trim());
    },
   );
 },

Below is my _fetchPage function

Future<void> _fetchPage(int pageKey, String searchParam) async {
    final results = await searchRepo.getCareers(
          isSearching: true,
          searchParam: searchParam,
          token: token,
          page: pageKey,
        );
      hasNextPage = results['hasNextPage'];
      newItems.clear();
      newItems = results['schools'];
      print(newItems.length);
      if (!hasNextPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + 1;
        _pagingController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingController.error = error.toString();
    }
  }

Below is my UI

PagedListView<int, dynamic>(
                  shrinkWrap: true,
                  pagingController: _pagingController,
                  builderDelegate: PagedChildBuilderDelegate<dynamic>(
                    itemBuilder: (context, item, index) {
                      return ListTile(
                        leading: InitialsAvatar(name: item.name),
                        title: Text(
                          item.name ?? 'n/a',
                          style: theme.textTheme.bodyText1,
                        ),
                        subtitle: Text(
                          item.category,
                          style: theme.textTheme.labelMedium,
                        ),
                      );
                    },
                  ),
                ),

I tried removing the pageRequestListener after the _fetchPage function but it did not work.
Is there any way I can do this? If this is not possible, is there any other package that can work for me?

英文:

I am making a search request but the data returned comes with a pagination type. I have in my onchanged function in my TextField so that whenever I type something, it makes a get request. The first letter I type works fine but when I type again, nothing happens.

This is what I have in my onChanged function

onChanged: (value) {
      _pagingController.addPageRequestListener(
      (pageKey) {
      _fetchPage(pageKey, val.trim());
    },
   );
 },

Below is my _fetchPageFunction

Future&lt;void&gt; _fetchPage(int pageKey, String searchParam) async {
    final results = await searchRepo.getCareers(
          isSearching: true,
          searchParam: searchParam,
          token: token,
          page: pageKey,
        );
      hasNextPage = results[&#39;hasNextPage&#39;];
      newItems.clear();
      newItems = results[&#39;schools&#39;];
      print(newItems.length);
      if (!hasNextPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + 1;
        _pagingController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingController.error = error.toString();
    }
  }

Below is my UI

PagedListView&lt;int, dynamic&gt;(
                  shrinkWrap: true,
                  pagingController: _pagingController,
                  builderDelegate: PagedChildBuilderDelegate&lt;dynamic(
                    itemBuilder: (context, item, index) {
                      return ListTile(
                        leading: InitialsAvatar(name: item.name),
                        title: Text(
                          item.name ?? &#39;n/a&#39;,
                          style: theme.textTheme.bodyText1,
                        ),
                        subtitle: Text(
                          item.category,
                          style: theme.textTheme.labelMedium,
                        ),
                      );
                    },
                  ),
                ),

I tried removing the pageRequestLister after the _fetchPage funtion but it did not work.
Is there any way I can do this? If this is not possible, is there any other package that can work for me?

答案1

得分: 1

尝试在您的 onChanged() 函数内添加 _pagingController.refresh();

英文:

Try adding _pagingController.refresh(); inside your onChanged().

onChanged: (value) {
      _pagingController.refresh();
      _pagingController.addPageRequestListener(
      (pageKey) {
      _fetchPage(pageKey, val.trim());
    },
   );
 },

huangapple
  • 本文由 发表于 2023年1月8日 21:54:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/75048292.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定