flutter实现上拉到底部加载更多数据

实现上拉加载数据,效果如下:

flutter滚动列表加载数据

使用的库主要是infinite_scroll_pagination ,

安装请查看官网

接口用的是https://reqres.in/提供的接口

请求接口用到的库是dio

下面主要是介绍如何使用infinite_scroll_pagination实现上拉加载数据,详细学习其它例子请查看infinite_scroll_pagination

main.dart全部代码如下

// ignore_for_file: non_constant_identifier_names
import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';import 'package:dio/dio.dart' as MyDio;void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Infinite Scroll Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: const InfiniteScrollList(),);}
}class InfiniteScrollList extends StatefulWidget {const InfiniteScrollList({super.key});@override// ignore: library_private_types_in_public_api_InfiniteScrollListState createState() => _InfiniteScrollListState();
}class _InfiniteScrollListState extends State<InfiniteScrollList> {final PagingController<int, UserData> _listController =PagingController(firstPageKey: 1);@overridevoid initState() {super.initState();_listController.addPageRequestListener((page) {_fetchListData(page);});}Future<void> _fetchListData(int page) async {MyDio.Dio dio = MyDio.Dio();MyDio.Response response = await dio.get('https://reqres.in/api/users',queryParameters: {'page': page,// 'stage_id': 4,// 'category_id': 3,});ApiResponse data = ApiResponse.fromJson(response.data);if (data.data.isEmpty) {_listController.appendLastPage(data.data);} else {final nextPageKey = page + 1;_listController.appendPage(data.data, nextPageKey);}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Infinite Scroll Demo')),body: PagedListView<int, UserData>(pagingController: _listController,builderDelegate: PagedChildBuilderDelegate<UserData>(itemBuilder: (context, item, index) =>ListTile(title: SizedBox(child: Text(item.firstName))),noMoreItemsIndicatorBuilder: (context) => const Center(child: Padding(padding: EdgeInsets.all(20.0),child: Text('没有更多了'),),),),),);}@overridevoid dispose() {_listController.dispose();super.dispose();}
}class ApiResponse {final int page;final int perPage;final int total;final int totalPages;final List<UserData> data;final Support support;ApiResponse({required this.page, required this.perPage, required this.total, required this.totalPages, required this.data, required this.support});factory ApiResponse.fromJson(Map<String, dynamic> json) {var list = json['data'] as List;List<UserData> dataList = list.map((i) => UserData.fromJson(i)).toList();return ApiResponse(page: json['page'],perPage: json['per_page'],total: json['total'],totalPages: json['total_pages'],data: dataList,support: Support.fromJson(json['support']),);}
}class UserData {final int id;final String email;final String firstName;final String lastName;final String avatar;UserData({required this.id, required this.email, required this.firstName, required this.lastName, required this.avatar});factory UserData.fromJson(Map<String, dynamic> json) {return UserData(id: json['id'],email: json['email'],firstName: json['first_name'],lastName: json['last_name'],avatar: json['avatar'],);}
}class Support {final String url;final String text;Support({required this.url, required this.text});factory Support.fromJson(Map<String, dynamic> json) {return Support(url: json['url'],text: json['text'],);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/133185.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

世界土壤数据库(HWSD)土壤数据集

简介&#xff1a; HWSD&#xff08;Harmonized World Soil Database&#xff09;是联合国粮食及农业组织&#xff08;FAO&#xff09;和国际土壤参考与信息中心&#xff08;ISRIC&#xff09;共同开发的世界土壤数据集。该数据集是一份高分辨率&#xff08;1 km&#xff09;&a…

JUC-3-并发锁

一 JAVA 多线程锁介绍 1 悲观锁 定义&#xff1a;悲观锁指对数据被外界修改持保守态度&#xff0c;认为数据很容易就会被其他线程修改&#xff08;很悲观&#xff09;&#xff0c;所以在数据被处理前先对数据进行加锁&#xff0c;并在整个数据处理过程中&#xff0c;使数据处…

linux之信号量的删除

linux之信号量的删除 命令格式&#xff1a;ipcrm [options] [resources] 常用选项&#xff1a; -s&#xff0c;–semaphore-id 按id号删除信号量 -S&#xff0c;–semaphore-key 按键值删除信号量 -a&#xff0c;–all[] 全部删除 -v&#xff0c;–verbose 解释正在进行的操作…

LLM之Prompt(一):5个Prompt高效方法在文心一言3.5的测试对比

在Effective Prompt: 编写高质量Prompt的14个有效方法文中我们了解了14个编写Prompt的方法&#xff08;非常感谢原作者&#xff09;&#xff0c;那么这些Prompt在具体大模型中的效果如何呢&#xff1f;本文以百度文心一言3.5版本大模型在其中5个方法上做个测试对比。 第1条&am…

Android codec2 视频框架 之应用

文章目录 应用流程外部主动获取输入和输出buffer外部设置回调 内部流程 应用流程 外部主动获取输入和输出buffer 解码的调用流程&#xff0c;以android原生的一个bin来说明 android 原生代码位置&#xff1a; frameworks/av/cmds/stagefright/codec.cpp frameworks/av/cmds/st…

Golang区块链钱包

引言 随着区块链技术的发展&#xff0c;数字货币的应用逐渐普及。而区块链钱包作为数字货币的一种必备工具&#xff0c;也变得越来越重要。Golang作为一种简单、高效的编程语言&#xff0c;被广泛运用于区块链领域。本文将介绍Golang区块链钱包的基本概念、特点和使用方法&…

Django系列之Serializer的source参数使用、自定义序列化方法

数据准备 models.py from django.contrib.auth.models import AbstractUser from django.db import modelsclass Publish(models.Model):name models.CharField(max_length32)city models.CharField(max_length8)email models.CharField(max_length32)def __str__(self):r…

【系统集成项目管理工程师】——2.技术

信息与信息化 信息技术核心&#xff1a;信息的传输技术 信息技术三大支柱&#xff1a;传感技术、计算机技术、通信技术 时间敏感网络TSN能够帮助实现信息技术(IT)与运营技术(OT&#xff09;融合&#xff0c;统一的网络能够减少开发部署成本&#xff0c;降低控制器等产品网络配…

Docker中OceanBase挂载过后,删除再启动无限重启的解决办法

ob-compose.yml文件如下&#xff1a; version: 3 services:oceanbase1:image: oceanbase/oceanbase-ce:latestcontainer_name: oceanbase1hostname: oceanbase1ports:- 2881:2881restart: alwaysprivileged: truevolumes:#- //d/obdata/ob:/root/ob#- //d/obdata/obd:/root/.o…

企业该如何选择数字化转型工具?

本人从事TOB服务行业 8 年&#xff0c;曾有幸参与过多家大型企业数字化转型的规划与实施。 在这些服务的企业客户中&#xff0c;有初创企业从几个人开始&#xff0c;短短几年就发展成了拥有2000人的大型企业&#xff0c;也有拥有百年历史的跨国集团企业和国有单位。里面的大多…

外卖系统的数据管理和隐私保护应该如何进行?

1. 数据管理 外卖系统处理大量用户数据&#xff0c;包括个人信息、订单记录、支付信息等。以下是一些数据管理的最佳实践&#xff1a; 合规性与透明度&#xff1a;确保你的数据收集、存储和处理符合相关法规&#xff0c;例如GDPR&#xff08;通用数据保护条例&#xff09;。同…

【已解决】ModuleNotFoundError: No module named ‘dgl‘

禁止使用下面方法安装DGL,这种方法会更新你的pytorch版本&#xff0c;环境越变越乱 pip install dgl 二是进入DGL官网&#xff1a;Deep Graph Library (dgl.ai)&#xff0c;了解自己的配置情况&#xff0c;比如我cuda11.8&#xff0c;ubuntu&#xff0c;当然和linux是一样的 …

Go语言Gin框架前后端分离项目开发工程化实例

文章目录 基本数据配置配置文件管理数据库配置路由配置封装公共方法 数据库模型数据表内容model文件DTO文件 中间件错误异常捕获中间件跨域中间件token认证中间件JWT 控制器UserController 运行调试注册接口登录接口获取用户信息 构建发布项目前端VUE调用接口 基本数据配置 配…

第8章_聚合函数

文章目录 1 聚合函数介绍1.1 AVG和SUM函数1.2 MIN和Max函数1.3 COUNT函数演示代码 2 GROUP BY2.1 基本使用2.2 使用多个列分组2.3 演示代码 3 HAVING3.1 基本使用3.2 WHERE和HAVING的对比3.3 演示代码 4 SELECT的执行过程4.1 查询的结构4.2 SELECT执行顺序4.3 SQL的执行原理演示…

VScode连接Xshell 并解决【过程试图写入的管道不存在】报错

一.下载vscode 国内镜像&#xff1a; https://vscode.cdn.azure.cn/stable/6c3e3dba23e8fadc360aed75ce363ba185c49794/VSCodeUserSetup-x64-1.81.1.exe二.打开vscode在扩展搜索SSH并安装 三.添加主机 按F1选择添加新的ssh主机 按格式输入后在左边会出现电视的图标 之后输入…

Web3.0的测试题

任务&#xff1a; 在前端开发一个查询UI&#xff0c;查询当前用户账户的ETH余额和指定ERC20合约中的余额 目标&#xff1a; UI框架指定使用 MUI (https://mui.com)需要查询到当前账户的ETH余额并展示在UI界面上需要输入ERC20合约地址后&#xff0c;查询到到当前账户在此ERC20…

Plist编辑软件 PlistEdit Pro mac中文版功能介绍

PlistEdit Pro mac是一款功能强大的Plist文件编辑软件。Plist文件是苹果公司开发的一种XML文件格式&#xff0c;用于存储应用程序的配置信息和数据。PlistEdit Pro可以帮助用户轻松地编辑和管理Plist文件。 PlistEdit Pro具有直观的用户界面和丰富的功能。用户可以使用该软件打…

关于Vue使用props传值遇到的一些问题

一、The data property “tableData” is already declared as a prop. Use prop default value instead. 翻译过来&#xff1a;数据属性“tableData”已声明为prop。请改prop默认值。 将父组件的prop传过去变量改一下 二、prop传值&#xff0c;子组件比父组件先渲染&#…

【多媒体文件格式】MP4、MPG、TS、3GP、3G2、3GPA

MP4 mp4或称MPEG-4 Part 14&#xff0c;是一种多媒体容器格式&#xff0c;扩展名为.mp4。 历史[6]&#xff1a; 2001年&#xff0c;apple的QuickTime格式&#xff0c;.qt和.mov的后缀名。2001年&#xff0c;MPEG-4 Part1&#xff0c;把基于QuickTime的box布局的容器格式添加…

每天五分钟计算机视觉:池化层的反向传播

本文重点 卷积神经网络(Convolutional Neural Network,CNN)作为一种强大的深度学习模型,在计算机视觉任务中取得了巨大成功。其中,池化层(Pooling Layer)在卷积层之后起到了信息压缩和特征提取的作用。然而,池化层的反向传播一直以来都是一个相对复杂和深奥的问题。本…