如何在Flutter中对指定格式API数据实现ListView或GridView分页

前置准备 #

首先明确API返回字段的作用：

• recordsTotal：全量数据总条数
• recordsFiltered：筛选条件匹配的总条数，无筛选时和recordsTotal完全一致
• data：当前分页请求返回的单页数据列表
• draw：请求计数标识，用于避免异步请求乱序导致的数据错乱
• input：请求透传的筛选参数，可用于校验请求参数是否匹配

第一步：定义本地状态 #

首先在页面逻辑中定义分页相关状态变量：

• 当前页码pageNum，初始值为1
• 每页请求条数pageSize，根据业务需求自定义，常用值为10、15、20
• 已加载的全量列表数据listData，初始为空数组
• 总数据条数total，初始值为0
• 请求锁loading，初始值为false，避免同一时间发起多个重复请求
• 更多数据标识hasMore，初始值为true，标记是否还有未加载的后续页数据

第二步：API请求逻辑处理 #

请求参数组装 #

该API符合DataTables请求规范，请求时需要携带以下核心分页参数：

• draw：每次请求自增1，和返回的draw字段值做校验
• start：当前分页的起始索引，计算公式为(pageNum - 1) * pageSize
• length：即你定义的pageSize，表示单页请求的条数
• 如有筛选条件，同步传入对应筛选参数即可

返回结果处理 #

拿到接口返回数据后按以下逻辑处理：

1. 先校验返回的draw值是否和本次请求传入的draw值一致，不一致直接丢弃该返回结果，避免旧请求覆盖新请求的数据
2. 如果是第一页请求，直接用返回的data替换listData；如果是后续页请求，把返回的data拼接到listData末尾
3. 把返回的recordsTotal赋值给本地total变量
4. 判断是否还有更多数据：如果listData.length >= total，将hasMore设为false，后续不再发起分页请求
5. 请求结束后将loading重置为false

第三步：列表组件绑定逻辑 #

无限滚动分页（ListView/GridView通用） #

1. 列表的渲染数据源直接绑定本地维护的listData数组
2. 监听列表的滚动事件，当滚动位置距离列表底部不足预设阈值（常用200px）时，触发加载下一页逻辑
3. 触发下一页加载前先做校验：只有loading == false且hasMore == true时，才将pageNum自增1，然后发起新的分页请求
4. 列表底部根据状态渲染对应提示：loading == true时渲染加载中提示，hasMore == false时渲染“没有更多数据”提示

页码切换式分页 #

1. 列表渲染数据源同样绑定listData
2. 点击对应页码时，直接更新pageNum为选中的页码值，清空listData后重新发起分页请求即可

第四步：边界场景处理 #

• 下拉刷新：触发刷新时将pageNum重置为1，listData清空，hasMore重置为true，重新发起第一页请求即可
• 空状态：第一页请求返回的data为空时，渲染空数据提示
• 请求失败：请求异常时将loading重置为false，如果是后续页请求失败，将pageNum回退到上一个值，避免丢页

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