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

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'],);}
}

相关文章:

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

实现上拉加载数据&#xff0c;效果如下&#xff1a; flutter滚动列表加载数据 使用的库主要是infinite_scroll_pagination , 安装请查看官网 接口用的是https://reqres.in/提供的接口 请求接口用到的库是dio 下面主要是介绍如何使用infinite_scroll_pagination实现上拉加载…...

UE4 Niagara Module Script 初次使用笔记

这里可以创建一个Niagara模块脚本 创建出来长这样 点击号&#xff0c;输出staticmesh&#xff0c;点击它 这样就可以拿到对应的一些模型信息 这里的RandomnTriCoord是模型的坐标信息 根据坐标信息拿到位置信息 最后的Position也是通过Map Set的号&#xff0c;选择Particles的P…...

【Spring Boot 源码学习】JedisConnectionConfiguration 详解

Spring Boot 源码学习系列 JedisConnectionConfiguration 详解 引言往期内容主要内容1. RedisConnectionFactory1.1 单机连接1.2 集群连接1.3 哨兵连接 2. JedisConnectionConfiguration2.1 RedisConnectionConfiguration2.2 导入自动配置2.3 相关注解介绍2.4 redisConnectionF…...

联想服务器-HTTP boot安装Linux系统

HTTP boot与传统PXE的主要差异 HTTP不再需要使用UDP协议的tftp服务&#xff08;连接不可靠、不支持大文件&#xff09;了&#xff0c;只需要dhcp 和http 两个服务即可&#xff0c;支持较稳定的大文件传输。 实验环境 ThinkSystem服务器SR650V2 SR660V2 通过HTTP boot安装Cen…...

容器滚动更新过程中流量无损

应用在发布或重启的期间会出现少量的 5xx 异常&#xff0c;应该如何解决&#xff1f; 我们发现导致流量有损的原因有很多&#xff0c;比如&#xff1a; 上线时&#xff0c;应用在就绪前收到流量&#xff0c;导致请求无法被处理&#xff1b; 下线时&#xff0c;应用没有做优雅…...

深入理解JS中的this

1、浅谈this 1.1、调用位置 在学习this的绑定过程之前&#xff0c;首先要理解调用位置&#xff0c;即函数在代码中被调用的位置&#xff0c;因此我们需要分析调用栈&#xff0c;看以下代码 function baz(){// 当前调用栈是baz// 因此调用位置就是全局作用域console。log(&qu…...

rust 基础数据类型

默认类型 大部分情况下&#xff0c;rust 可以基于上下文自动推导出变量的类型。下面代码中&#xff0c;变量 x 没有显式&#xff0c;rust 默认是 i32 类型。 fn main() {let x 5; }但也有一些例外情况&#xff0c;比如&#xff0c;字符串类型的转换中变量 x 的类型&#xff…...

ELK极简上手

目录 引言 首先&#xff0c;下载相关的包 其次&#xff0c;安装启动elasticsearch 下一步&#xff0c;安装并启动logstash 最后&#xff0c;安装并启动kibana 进一步的&#xff0c;测试数据的流动 引言 最近整理电脑发现之前的一篇ELK极简入门笔记&#xff0c;现整理发出…...

在 JavaScript 中,变量的作用域是如何确定的?

在 JavaScript 中&#xff0c;变量的作用域是由作用域链&#xff08;Scope Chain&#xff09;来确定的。作用域链是指变量在执行期间访问的作用域的链式结构。 JavaScript 中的作用域分为全局作用域和局部作用域&#xff08;函数作用域和块级作用域&#xff09;。 全局作用域…...

常见面试题-TCP三次握手四次挥手

TCP 三次握手/四次挥手 参数用途SYN用于启动和建立连接时&#xff0c;同步设备之间的序列号。0到2^32 - 1的随机数。ACK向另一端确认已经收到 SYN&#xff0c;数值为收到 SYN 增一。SYN-ACK确认之前收到了 SYN&#xff0c;数值为自定义值。FIN终止连接。RST重置连接。 三次握…...

前端框架Vue学习 ——(六)Vue组件库Element

文章目录 Element 介绍快速入门常见组件表格分页Dialog 对话框组件表单 Container 布局容器 Element 介绍 Element&#xff1a;是饿了么团队研发的&#xff0c;一套为开发者、 设计师和产品经理准备的基于Vue 2.0的桌面端组件库。 组件&#xff1a;组成网页的部件&#xff0c;…...

第六章:Property-based Testing and Test Oracles

文章目录 Test OraclesActive and Passive Test OraclesTypes of Test OraclesFormal, executable specificationsSolved examplesMetamorphic oraclesAlternative implementations (备用实现)Heuristic oracles (启发式)The Golden Program!Oracle Deviation (Oracle偏差)T…...

react生命周期函数

React 组件的生命周期可分为三大阶段&#xff1a;挂载阶段&#xff08;Mounting&#xff09;、更新阶段&#xff08;Updating&#xff09;和卸载阶段&#xff08;Unmounting&#xff09;。 1.挂载阶段&#xff08;Mounting&#xff09; 在组件被插入到 DOM 中后&#xff0c;会…...

QSqlDatabase使用Sqlite

QSqlDatabase使用Sqlite Sqlite本身就可以被内嵌在程序中&#xff0c;QSqlDatabase也自带Sqlite驱动&#xff0c;无需任何第三方依赖&#xff0c;可以直接使用 QSqlDatabase _db QSqlDatabase::addDatabase("QSQLITE"); QString dbPath "/path/to/xxx.db&qu…...

宝马——使用人工智能制造和驾驶汽车

德国汽车制造商宝马(BMW)每年在全球制造和销售250万台汽车&#xff0c;其品牌包括宝马、MINI和劳斯莱斯。 宝马汽车以其卓越的性能和对新技术的应用而著名&#xff0c;它是道路上最精致的汽车之一&#xff0c;并且和其竞争对手戴姆勒(Daimler)一样&#xff0c;在将自动驾驶汽车…...

java入门,Map<? extends String, ?>

一、前言 是不是平时写业务代码的时候很少用到这个写法&#xff1a;Map<? extends String, ?>&#xff0c;这是Map类型&#xff0c;Map的键是? extends String 类型&#xff0c;值是?。为什么不是我们平时写的Map< String, Object>&#xff0c;这种写法有什么好…...

Spring Boot 统一处理功能

目录 1.用户登陆权限验证 1.1 每个方法验证 1.2 Spring AOP 用户统一登陆验证 1.3 拦截器 1.3.1 自定义拦截器 1.3.2 将自定义拦截器配置到系统设置中&#xff0c;并且设置拦截规则 1.3.3 排除所有的静态资源 1.4 登录拦截器&#xff08;练习&#xff09; 1.5 拦截器原…...

香港金融科技周VERTU CSO Sophie谈Web3.0的下一个风口 手机虚拟货币移动支付

10月31日&#xff0c;香港金融科技周正式拉开帷幕。这项香港金融科技界地年度盛事今年已经踏入了第八届&#xff0c;本届活动吸引超过数百位金融科技专业人士、创业者和行业领袖现场参与&#xff0c;线上参与观众超过10万人次。 在金融科技周的圆桌会议上&#xff0c;VERTU首席…...

分布式单元化

一 分布式单元化 1.1 两地三中心 顾名思义&#xff0c;两地指的是两个城市&#xff1a;同城&#xff0c;异地。三中心指的是三个数据中心&#xff1a;生产中心、同城容灾中心、异地容灾中心。 在同一个城市或者临近的城市建设两个相同的系统&#xff0c;双中心具备相当的业…...

wvp-gb28181-pro接入海康摄像头

网络-高级配置-平台接入 sip服务器信息默认参数如下&#xff0c;一键安装wvp完成之后默认就是这样的参数 设置项 设置值 平台接入方式 28181 本地sip端口 5060 传输协议 tcp、udp&#xff08;外网的话我建议还是用tcp&#xff09; 启用 勾选 协议版本 GB/T28181-201…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...