当前位置: 首页 > news >正文

【Flutter】Flutter 使用 infinite_scroll_pagination 实现无限滚动分页

【Flutter】Flutter 使用 infinite_scroll_pagination 实现无限滚动分页

文章目录

    • 一、前言
    • 二、安装和基本使用
      • 1. 添加依赖
      • 2. 基础配置和初始化
    • 三、实际业务中的用法
      • 1. 与 API 集成
      • 2. 错误处理
    • 四、完整示例
      • 1. 创建一个无限滚动列表
      • 2. 使用在你的应用中
      • 3. 完整代码示例
    • 五、总结

一、前言

你好,我是小雨青年,今天我们要聊聊 Flutter 中一个非常实用的包——infinite_scroll_pagination。这个包可以帮助我们实现无限滚动分页,也就是当用户滚动到页面底部时,会自动加载更多数据。

本文的重点

  • 如何安装和基础使用 infinite_scroll_pagination
  • 如何将其应用到实际业务中
  • 一个完整的、可以直接运行的代码示例

版本信息

  • Flutter 版本:3.10
  • Dart 版本:3.0
  • infinite_scroll_pagination包版本:4.0.0

你是否对成为 Flutter 高手充满渴望,想要掌握更多前沿技巧和最佳实践?现在,你的机会来了!

🚀 Flutter 从零到一:基础入门到应用上线全攻略 正在热烈招募参与者!

✅ 这个专栏不仅包括了全面的 Flutter 学习资源,还有实用的代码示例和深入的解析教程。
✅ 专栏内容会持续更新,价格也会随之上涨。现在加入,享受最优惠的价格,抓住属于你的机会!
✅ 想要与其他 Flutter 学习者互动交流吗?点击这里 加入我们的讨论群,一起成长、一起进步。

别再等待,让我们今天就启程,共同开启 Flutter 的精彩学习之旅吧!

二、安装和基本使用

1. 添加依赖

首先,打开你的 pubspec.yaml 文件,然后添加以下依赖:

dependencies:flutter:sdk: flutterinfinite_scroll_pagination: ^4.0.0

然后运行 flutter pub get 来获取包。

2. 基础配置和初始化

在你的 Flutter 项目中,首先需要初始化一个 PagingController。这是一个非常关键的步骤,因为它负责管理分页逻辑。

final PagingController<int, YourDataModel> _pagingController = PagingController(firstPageKey: 0);

这里,YourDataModel 是你要分页显示的数据模型。

三、实际业务中的用法

1. 与 API 集成

infinite_scroll_pagination 是 API 不可知的,这意味着你可以与任何类型的 API 集成。你需要实现一个函数来获取数据,并将其传递给 PagingController

Future<void> _fetchPage(int pageKey) async {try {final newItems = await YourApi.getItems(pageKey, _pageSize);final isLastPage = newItems.length < _pageSize;if (isLastPage) {_pagingController.appendLastPage(newItems);} else {final nextPageKey = pageKey + newItems.length;_pagingController.appendPage(newItems, nextPageKey);}} catch (error) {_pagingController.error = error;}
}

2. 错误处理

如果在获取数据时出现错误,PagingController 有一个 error 属性,你可以设置它来显示错误。

catch (error) {_pagingController.error = error;
}

四、完整示例

1. 创建一个无限滚动列表

首先,我们需要创建一个 StatefulWidget,这将是我们无限滚动列表的主体。

class InfiniteScrollList extends StatefulWidget {_InfiniteScrollListState createState() => _InfiniteScrollListState();
}class _InfiniteScrollListState extends State<InfiniteScrollList> {static const _pageSize = 20;final PagingController<int, YourDataModel> _pagingController = PagingController(firstPageKey: 0);void initState() {super.initState();_pagingController.addPageRequestListener((pageKey) {_fetchPage(pageKey);});}Future<void> _fetchPage(int pageKey) async {// ... (与上文中的 _fetchPage 方法相同)}Widget build(BuildContext context) {return PagedListView<int, YourDataModel>(pagingController: _pagingController,builderDelegate: PagedChildBuilderDelegate<YourDataModel>(itemBuilder: (context, item, index) => YourListItemWidget(item: item),),);}void dispose() {_pagingController.dispose();super.dispose();}
}

在这个示例中,YourDataModel 是你的数据模型,YourListItemWidget 是你用来显示每个数据项的小部件。

2. 使用在你的应用中

现在,你可以在你的应用中任何地方使用 InfiniteScrollList 小部件来显示无限滚动列表。

void main() => runApp(MyApp());class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(title: 'Infinite Scroll Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: InfiniteScrollList(),);}
}

3. 完整代码示例

import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(title: 'Infinite Scroll Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: InfiniteScrollList(),);}
}class InfiniteScrollList extends StatefulWidget {_InfiniteScrollListState createState() => _InfiniteScrollListState();
}class _InfiniteScrollListState extends State<InfiniteScrollList> {static const _pageSize = 20;final PagingController<int, YourDataModel> _pagingController =PagingController(firstPageKey: 0);void initState() {super.initState();_pagingController.addPageRequestListener((pageKey) {_fetchPage(pageKey);});}Future<void> _fetchPage(int pageKey) async {// 这里模拟一个 API 调用,你可以替换为你的实际 API 调用List<YourDataModel> newItems = List.generate(_pageSize,(index) => YourDataModel('Item ${pageKey * _pageSize + index}'));await Future.delayed(Duration(seconds: 2)); // 模拟网络延迟final isLastPage = newItems.length < _pageSize;if (isLastPage) {_pagingController.appendLastPage(newItems);} else {final nextPageKey = pageKey + 1;_pagingController.appendPage(newItems, nextPageKey);}}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Infinite Scroll Demo')),body: PagedListView<int, YourDataModel>(pagingController: _pagingController,builderDelegate: PagedChildBuilderDelegate<YourDataModel>(itemBuilder: (context, item, index) =>ListTile(title: Text(item.name)),),),);}void dispose() {_pagingController.dispose();super.dispose();}
}class YourDataModel {final String name;YourDataModel(this.name);
}

运行结果如下所示:

五、总结

使用 infinite_scroll_pagination 包,我们可以轻松地在 Flutter 应用中实现无限滚动分页。这个包不仅提供了强大的功能,而且非常灵活,可以与任何 API 和数据源集成。对于那些希望提供更好用户体验的开发者来说,这是一个必不可少的工具。

对 Flutter 感兴趣,渴望深入探索和学习吗?Flutter 从零到一:基础入门到应用上线全攻略 正是你的完美起点!

📘 在这个专栏中,你将发现丰富的 Flutter 学习资源,从代码示例到深入的技术解读,一应俱全。
🛠️ 想要了解如何用 Flutter 构建出色的应用吗?所有的秘诀和答案都在我们的专栏里等着你!
💰 别再犹豫,专栏内容将不断更新,价格也将逐渐上涨。现在就加入,享受最优惠的价格,开启你的 Flutter 探索之旅!

想了解更多?点击这里查看 Flutter Developer 101:入门小册 & 专栏指引

👥 还有,别忘了点击这里 加入我们的讨论群,与其他 Flutter 爱好者一起交流和学习,共同成长!

相关文章:

【Flutter】Flutter 使用 infinite_scroll_pagination 实现无限滚动分页

【Flutter】Flutter 使用 infinite_scroll_pagination 实现无限滚动分页 文章目录 一、前言二、安装和基本使用1. 添加依赖2. 基础配置和初始化 三、实际业务中的用法1. 与 API 集成2. 错误处理 四、完整示例1. 创建一个无限滚动列表2. 使用在你的应用中3. 完整代码示例 五、总…...

python爬虫的js逆向入门到进阶教程文章分享汇总~持续更新

目录 一、内容介绍二 、专栏内容-持续更新1、JS逆向入门2、Js逆向进阶3、爬虫基础知识4、工具与安装5、漫星内容分享 三、星球使用四、b站up主视频推荐 一、内容介绍 二 、专栏内容-持续更新 1、JS逆向入门 2023-08-25》11.常见加密>xx音乐RSA加密 https://articles.zsxq.c…...

面试常问:水平居中和垂直居中的方法

水平居中 文本居中 如果元素为行内元素&#xff0c;可以将父元素的text-align属性设置为center&#xff0c;这样子元素就会水平居中对齐 .text{text-align: center; }固定宽度的居中 如果元素宽度已知并固定&#xff0c;可以通过将左右margin设置为auto来实现水平居中。 .…...

第七届“蓝帽杯”初赛取证题目分享

前言&#xff1a; 刚刚打完比赛&#xff0c;准备晚上写一下wp&#xff0c;刚好整理一下题目&#xff0c;ctf的题目一般都有&#xff0c;取证不一定&#xff0c;所以我整理一下&#xff0c;方便大家复盘。 题目&#xff1a; 1&#xff1a;【APK取证】涉案apk的包名是&#xff…...

go语言学习之有关变量的知识

文章目录 变量的学习1.变量的使用步骤2.变量的注意事项3.变量使用的三种方式&#xff1a;4.程序中 号的使用5.变量的数据类型1&#xff09;int数据类型2&#xff09;小数类型浮点型3&#xff09;**字符类型**4&#xff09;**字符串&#xff08;String&#xff09;类型**5&…...

算法通过村第8关【青铜】| 二叉树的经典算法题

二叉树的双指针 1.相同的树 思路&#xff1a;递归的挨个比较是否相同 class Solution {public boolean isSameTree(TreeNode p, TreeNode q) {if((p null&&q!null) || (p ! null && q null) || (p!null&&q!null&&p.val ! q.val)){return f…...

Open3D 点云均值滤波

目录 一、算法原理1、均值滤波2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 1、均值滤波 对待处理的当前采样点,选择一个模板,该模板由其邻近的若干个数据点组成,…...

C语言指针入门详解

一、指针简介 指针(Pointer)是C语言的一个重要知识点&#xff0c;其使用灵活、功能强大&#xff0c;是C语言的灵魂指针与底层硬件联系紧密&#xff0c;使用指针可操作数据的地址&#xff0c;实现数据的间接访问指针就是地址&#xff0c;通过访问此地址来获取该地址存储的数据 …...

软件工程(十四) 设计模式之结构型模式(二)

1、组合模式 简要说明 将对象组合成树形结构以表示“整体-部分”的层次结构,使得用户对单个对象和组合对象的使用具有一致性。 速记关键字 树形目录结构 类图如下 由类图其实可以看出,组合模式就是将具有父子关系的结构,组装形成一棵树,并且根据规范,树干节点和叶子节…...

不解压的方式直接更新jar包内部的内容

前言 如果线上直接更新一个class&#xff0c;可以不用解压&#xff0c;直接利用jar命令直接更新jar报的资源和内容 更新jar包内容文件 Jar 工具提供了一个 u 选项&#xff0c;你可以通过修改其清单或添加文件来更新现有 JAR 文件的内容。 添加文件的基本命令具有以下格式&am…...

软件工程(八) UML之类图与对象图

1、类图与对象图 1.1、类图与对象图的概念 类图(class diagram)描述一组类、接口、协作和它们之间的关系 对象图(object diagram)描述一组对象及它们之间的关系、对象图描述了在类图中所建立的事物实例的静态快照。 1.2、类图与对象图的区别 类图和对象图基本上是一样…...

【Unity3D赛车游戏】【五】Unity中汽车加速效果是如何优化的?

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…...

龙智案例:某大型零售企业如何打造高速、现代化的ITSM体系

在2023 DevOps国际峰会北京站的现场&#xff0c;我们对话了龙智咨询顾问胡若愚&#xff0c;他为我们奖助了一位零售业的大型客户是如何在数字化浪潮中&#xff0c;凭借龙智提供的Jira Service Management产品及服务&#xff0c;打造现代化ITSM平台&#xff0c;提升客户满意度。…...

jdk 03.stream

01.集合处理数据的弊端 当我们在需要对集合中的元素进行操作的时候&#xff0c;除了必需的添加&#xff0c;删除&#xff0c;获取外&#xff0c;最典型的操作就是集合遍历 package com.bobo.jdk.stream; import java.util.ArrayList; import java.util.Arrays; import java.ut…...

“华为杯”研究生数学建模竞赛2018年-【华为杯】C题:对恐怖袭击事件记录数据的量化分析

目录 摘 要: 一、 问题背景与重述 1.1 问题背景 1.2 问题重述 二、 问题分析...

java8的reduce方法

在 Java 8 中&#xff0c;reduce 是一个流操作方法&#xff0c;用于将流中的元素按照指定的操作进行归约&#xff08;reduce&#xff09;操作&#xff0c;最终得到一个结果。 reduce 方法有三种重载形式&#xff1a; T reduce(T identity, BinaryOperator<T> accumulato…...

Mac发现有的软件不能上网的破解之法

1、Mac上打开终端 terminal &#xff0c;获取 root 权限。 sudo -i 2、编辑 hosts 文件 vim /private/etc/hosts 3、找到被禁止软件的数据请求域名&#xff0c;然后删除相关行&#xff0c;快捷件dd&#xff0c;然后:wq保存退出 比如百度 127.0.0.1 pan.baidu.com ##sec 印…...

定时检测接口是否正常飞书告警脚本

第一版 支持多个接口地址,循环检测,定时每分钟执行一次脚本 告警效果 脚本 飞书机器人创建忽略跳过,各大协作平台大同小异拿出机器人hook地址 #!/bin/bash URL_LIST=(https://gatewaxxxxxxxxxxxxxxxxxx https://sandbox-gatexxxxxxxxxxxxxxxxxx)for URL in ${URL_LIST[*...

【MySQL】2、MySQL数据库的管理

常用 describe user; Field:字段名称 Type:数据类型 Null :是否允许为空 Key :主键 Type:数据类型 Null :是否允许为空key :主键 Default :默认值 Extra :扩展属性&#xff0c;例如:标志符列&#xff08;标识了种子&#xff0c;增量/步长&#xff09;1 2 id&#xff1a;1 3 5 …...

8086汇编test指令学习

Test指令将两个操作数进行逻辑与运算&#xff0c;并根据运算结果设置相关的标志位。Test的两个操作数不会被改变。运算结果在设置过相关标记位后会被丢弃。 TEST AX,BX 与 AND AX,BX 命令有相同效果&#xff0c;只是Test指令不改变AX和BX的内容&#xff0c;而AND指令会把结果保…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...