您现在的位置是:首页 >技术教程 >Jetpack Compose 中使用分页 API 调用的无限滚动网站首页技术教程

Jetpack Compose 中使用分页 API 调用的无限滚动

Calvin880828 2023-07-07 00:00:03
简介Jetpack Compose 中使用分页 API 调用的无限滚动

Jetpack Compose 中使用分页 API 调用的无限滚动

effect
最近,我在DashCoin 的硬币屏幕上添加了一个带有分页 API 调用的无限滚动。它使浏览硬币列表变得非常困难,并且确实减少了初始加载时间,比以前少了。如果没有正确实施,实施无限滚动可能会很棘手。它可以轻松触发重新压缩并导致无限的 API 调用。这是我实现它的方式:

设置分页 API 调用并处理 UI 状态

您的 API 调用应该具有三种状态。加载、成功、错误

在加载状态
你想更新你的屏幕加载状态
ui-state
成功状态

  • 将您的 Loading 状态设置回 false。
  • 将响应中的新列表附加到旧列表。
  • 设置新的分页键。
  • 你想确定响应是否返回一个空列表,这意味着你到达了文件的末尾,这意味着你不需要继续向服务器发送请求。
    screenState
    错误状态
  • 将您的加载状态设置回 false
  • 更新你的错误值

screenState

分页数据处理

现在我们已经处理了屏幕状态,我们可以创建 Infinite Scroll Handler Composable
它需要一个,

  • 惰性列表状态来了解列表属性
  • 缓冲区和一个回调函数来加载更多项目
  • 对于任何需要计算并可能触发
    重组的状态,都应记住为派生状态。

看到这里,我们从惰性列表状态获取总项目数和最后一个项目索引,并比较最后一个项目可见索引是否大于总项目数减去缓冲区,这意味着我们到达了列表的末尾。

现在我们在我们记住的状态上启动 LaunchedEffect 并通过 SnapshotFlow 收集状态值以触发我们的回调函数。

infiniteState
如果您的列表立即加载,请确保执行以下操作

  • 确保您有两个独立的函数,getItemsFirstLoad()和getItemsPaginated()。
  • 第一次加载时将调用getItemsFirstLoad()并检查项目列表在第一次加载时是否为空。
  • 每次滚动到列表末尾以加载更多项目时都会调用getItemsPaginated() ,它会检查您是否没有到达响应列表的末尾并且列表不为空。

列表实现
现在你的列表应该是这样的
无限滚动效果

项目源码

项目参考地址:

https://github.com/MathRoda/DashCoin

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。