flutter实现上拉加载下拉刷新

效果如下:

flutter实现上拉加载下拉刷新

使用到的库是easy_refresh

安装请查看官网

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

请求接口用到的库是dio

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

main.dart全部代码如下

import 'package:flutter/material.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:dio/dio.dart' as MyDio;void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const MaterialApp(title: 'EasyRefresh',home: HomePage(),);}
}class HomePage extends StatefulWidget {const HomePage({Key? key}) : super(key: key);@overrideState<HomePage> createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {int _page = 1;List<UserData> dataList = [];late EasyRefreshController _controller;@overridevoid initState() {super.initState();_controller = EasyRefreshController(controlFinishRefresh: true,controlFinishLoad: true,);setState(() {dataList = [];_page = 1;});initListData();}@overridevoid dispose() {_controller.dispose();super.dispose();}Future<ApiResponse> _fetchListData(int page) async {MyDio.Dio dio = MyDio.Dio();MyDio.Response response =await dio.get('https://reqres.in/api/users', queryParameters: {'page': page,});ApiResponse data = ApiResponse.fromJson(response.data);return data;}void initListData() async {final resData = await _fetchListData(_page);if (resData.data.isNotEmpty) {setState(() {dataList = dataList..addAll(resData.data);_page = _page + 1;});_controller.finishRefresh();_controller.resetFooter();initListData();}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('EasyRefresh'),),body: EasyRefresh(controller: _controller,header: const ClassicHeader(armedText: '下拉加载更多',readyText: '正在加载中...',showMessage: false,processedText: '加载完成',processingText: '刷新中...',textStyle: TextStyle(color: Color(0xFFFF2B2B))),footer: const ClassicFooter(noMoreText: '没有更多数据了',noMoreIcon: Icon(Icons.mood_rounded),showMessage: false,processingText: '正在加载中...',textStyle: TextStyle(color: Color(0xFF846FFD))),onRefresh: () async {setState(() {dataList = [];_page = 1;});initListData();},onLoad: () async {final resData = await _fetchListData(_page);setState(() {dataList = dataList..addAll(resData.data);_page = _page + 1;});_controller.finishLoad(resData.data.isEmpty? IndicatorResult.noMore: IndicatorResult.success);// _fetchListData(_page);},child: ListView.builder(itemBuilder: (context, index) {return Card(child: Container(alignment: Alignment.center,height: 80,// ignore: unnecessary_string_interpolationschild: Text('${dataList[index].firstName}'),),);},itemCount: dataList.length,),),);}
}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/138177.shtml

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

相关文章

electron 内部api capturePage实现webview截图

官方文档 .capturePage([rect]) rect Rectangle (可选) - 要捕获的页面区域。 返回 Promise - 完成后返回一个NativeImage 在 rect内捕获页面的快照。 省略 rect 将捕获整个可见页面。 async function cap(){ let image await webviewRef.value.capturePage() console.log(im…

Postman的环境变量和全局变量

近期在复习Postman的基础知识&#xff0c;在小破站上跟着百里老师系统复习了一遍&#xff0c;也做了一些笔记&#xff0c;希望可以给大家一点点启发。 多种环境&#xff1a;开发环境、测试环境、预发布环境、生产环境&#xff0c;可以用环境变量来解决。 今天的分享就到这里&a…

【论文阅读】Progressive Spatio-Temporal Prototype Matching for Text-Video Retrieval

资料链接 论文链接&#xff1a;https://openaccess.thecvf.com/content/ICCV2023/papers/Li_Progressive_Spatio-Temporal_Prototype_Matching_for_Text-Video_Retrieval_ICCV_2023_paper.pdf 代码链接&#xff1a;https://github.com/imccretrieval/prost 背景与动机 文章发…

【微软技术栈】C#.NET 依赖项注入

本文内容 多个构造函数发现规则使用扩展方法注册服务组框架提供的服务服务生存期服务注册方法作用域验证范围场景 .NET 支持依赖关系注入 (DI) 软件设计模式&#xff0c;这是一种在类及其依赖项之间实现控制反转 (IoC) 的技术。 .NET 中的依赖关系注入是框架的内置部分&#…

LabVIEW在OPC中使用基金会现场总线

LabVIEW在OPC中使用基金会现场总线 本文讨论了如何使用开放的OPC&#xff08;用于过程控制的OLE&#xff09;接口访问基金会现场总线网络和设备。 NI-FBUS通信管理器随附了一个OPC数据访问服务器。 &#xff08;NI-FBUS Configurator自动包含NI-FBUS通信管理器。&#xff09…

Visual Studio2010保姆式安装教程(VS2010 旗舰版),以及如何运行第一个C语言程序,超详细

安装前请关闭杀毒软件&#xff0c;系统防火墙&#xff0c;断开网络连接 参考链接&#xff1a;请点击 下载链接&#xff1a; 通过百度网盘分享的文件&#xff1a;VS2010.zip 链接:https://pan.baidu.com/s/1yQUUCxMJP7FMaistFX94SQ 提取码:96ga 复制这段内容打开「百度网盘APP …

C++ 数组学习资料

C 数组学习资料 目录 什么是数组&#xff1f;声明和初始化数组访问数组元素多维数组数组和指针常见的数组操作数组的限制和注意事项 什么是数组&#xff1f; 在 C 中&#xff0c;数组是一种用于存储相同类型元素的数据结构。它是一个固定大小的连续内存块&#xff0c;每个元…

Linux下的调试工具——GDB

GDB 1.什么是GDB GDB 是由 GNU 软件系统社区提供的调试工具&#xff0c;同 GCC 配套组成了一套完整的开发环境&#xff0c;GDB 是 Linux 和许多 类Unix系统的标准开发环境。 一般来说&#xff0c;GDB 主要能够提供以下四个方面的帮助&#xff1a; 启动程序&#xff0c;可以按…

GF0-57CQD-002 测量参数:加速度、速度、位移–现场可配置

GF0-57CQD-002 测量参数:加速度、速度、位移–现场可配置 GF0-57CQD-002 是一款创新的双通道变送器&#xff0c;专为精确的振动测量而设计。它激励并读取来自加速度计的信号&#xff0c;并将整体振动值作为电流/电压信号传输。它测量加速度、速度和位移等不同参数的振动。配置…

vue3使用vuex的示例(模块化功能)

目录 1. store/index.ts 2. main.ts 3. App.vue调用 4. 如果删除moduleA的namespaced属性, 保留moduleB的namespaced:true 5. 则App.vue修改为: 1. store/index.ts 注意: 需要使用时带上模块名称的namespaced必须为true, 不写或者为false时调用时不需要写模块名称(获取st…

模电学习路径--google镜像chatgpt

交流通路实质 列出电路方程1&#xff0c;方程1对时刻t做微分 所得方程1‘ 即为 交流通路 方程1对时刻t做微分&#xff1a;两个不同时刻的方程1相减&#xff0c;并 令两时刻差为 无穷小 微分 改成 差 模电学习路径&#xff1a; 理论 《电路原理》清华大学 于歆杰 朱桂萍 陆文…

【数据结构】二叉树的遍历递归算法详解

二叉树的遍历 &#x1f4ab;二叉树的结点结构定义&#x1f4ab;创建一个二叉树结点&#x1f4ab;在主函数中手动创建一颗二叉树&#x1f4ab;二叉树的前序遍历&#x1f4ab;调用栈递归——实现前序遍历&#x1f4ab;递归实现中序和后序遍历 &#x1f4ab;二叉树的结点结构定义 …

看电影相关的日语,柯桥日语培训

1&#xff0e;映画を見たいです。 我想看电影。 2&#xff0e;どこの映画館&#xff08;えいがかん&#xff09;で上映&#xff08;上映&#xff09;しますか。 在哪里的影院上映&#xff1f; 3&#xff0e;どこで映画が見られますか。 哪里能看电影呢&#xff1f; 4&#x…

稳定扩散AI 纹理生成器

推荐基于稳定扩散(stable diffusion) AI 模型开发的自动纹理工具&#xff1a; DreamTexture.js自动纹理化开发包 - NSDT 什么是稳定扩散&#xff1f; 从技术上讲&#xff0c;Stable Diffusion 是一种用于机器学习的潜在扩散模型 &#xff08;LDM&#xff09;。这种类型的专用深…

【dbeaver】添加mysql高低版本选择驱动

添加mysql高低版本选择驱动 连接到数据库->全部->查询mysql MySQL 版本驱动 8.0 MySQL 5 版本驱动 5.7.x 其他需要就&#xff1a;https://downloads.mysql.com/archives/c-j/ 密码查看 项目设置密码&#xff1a; File -> Project security ->设置密码 It i…

解决项目开发过程需要多个if else的情况

项目开发过程中虽然不建议使用过多的if-else-else if&#xff0c;但是总有一些情况是避免不了&#xff0c;举一个例子&#xff1a; struct DataBase {std::string type_; };void Update(DataBase _data) {if (_data.type_ "UiSCLKey"){}else if (_data.type_ &quo…

Ubuntu 22.04 安装水星无线 USB 网卡

我的 USB 网卡是水星 Mercury 的&#xff0c; 在 Ubuntu 22.04 下面没有自动识别。 没有无线网卡的时候只能用有线接到路由器上&#xff0c;非常不方便。 寻思着把无线网卡驱动装好。折腾了几个小时装好了驱动。 1.检查网卡类型 & 安装驱动 使用 lsusb 看到的不一定是准确…

法治智能起航 | 拓世法宝AI智慧政务一体机重塑法治格局,开启智能司法新篇章

在科技的巨轮推动下&#xff0c;我们的社会正快速迈向一个以数据和智能为核心的新时代。在这个波澜壮阔的变革中&#xff0c;人工智能&#xff08;AI&#xff09;显得尤为突出&#xff0c;它不仅是科技进步的象征&#xff0c;更是未来发展的助力者。 2023年&#xff0c;最高人…

linux 3.13版本nvme驱动阅读记录四

这里记录下在nvme_probe函数调用misc_register函数的总结。 static int nvme_probe(struct pci_dev *pdev, const struct pci_device_id *id) {//... create_cdev://利用miscdev结构体提供一些字符设备的操作(回调函数)&#xff0c;用户空间可以下发一些nvme的命令等scnprintf…

医学影像系统源码(MRI、CT三维重建)

一、MRI概述 核磁共振成像&#xff08;英语&#xff1a;Nuclear Magnetic Resonance Imaging&#xff0c;简称NMRI&#xff09;&#xff0c;又称自旋成像&#xff08;英语&#xff1a;spin imaging&#xff09;&#xff0c;也称磁共振成像&#xff08;Magnetic Resonance Imag…