Flutter EasyRefreshList使用方法 下拉加载 上拉刷新

简介: Flutter EasyRefreshList使用方法 下拉加载 上拉刷新

Flutter列表

上一个农机列表布局有一些小问题。本文档就是记录下自己不熟悉不会的东西。页面写多了,自然就懂了(复杂页面除外)不敢说精通,最起码能画出来相似效果。简单页面就不在这里记录了。

简介

这个是一个上拉加载,下拉刷新的列表。本来是想自己写的,但是遇到很多难题,时间不太够。还是选择使用第三方组件 flutter_easyrefresh 组件只是提供了刷新加载的功能和UI,至于一次几页,一页多少条这个自己定义。 使用非常简单,单纯记一下语法。

引入方法

pubspec.yaml文件里面添加如下代码,然后执行 Pub get。

flutter_easyrefresh: ^0.0.0 #版本请移步上述地址。懒人可用2.2.1

页面使用

创建一个Dart文件,创建一个StatefulWidget类。import插件
```dart | pure
import 'package:flutter_easyrefresh/easy_refresh.dart';


然后实例化一个`_controller`用来触发刷新和加载动作。
```data
  EasyRefreshController _controller = EasyRefreshController();

剩下就是自由发挥的地方了。根据业务需求来写,我这边只简单的用到了刷新加载,所以我定义俩数组和其余参数就可以。代码如下:
```dart | pure
final jobList = Rx>([]);
final newJobList = Rx>([]);
var pageIndex = 1; //页数
var count = 10; //每页10条
late int maxSum;//最多条数
Map map = {'pageNum': 1};

void getNewData() {
pageIndex = 1;
map['pageNum'] = pageIndex;
requestXXXX(map).then((value) {
maxSum=value['total'];
List list = [];
value['records'].forEach((item) {
list.add(Job.fromJson(item));
});
jobList(list);
newJobList(list);//首次获取刷新,我把最新的数据拿出去,等待加载的时候合并。
});
}

void getMoreData() {
pageIndex++;
map['pageNum'] = pageIndex;
requestXXXX(map).then((value) {
maxSum=value['total'];
List list = [];
List Newlist = [];
value['records'].forEach((item) {
list.add(Job.fromJson(item));
});
newJobList.value.addAll(list);//拿到加载的数据,和我之前第一次刷新的数据合并下。
Newlist.addAll(newJobList.value);//存放到局部变量。
jobList(Newlist);//这里用的是GTEX 要覆盖整个数组,才能触发widget的Obx刷新。

});

}

int _count = 0;



### Widge里使用

这里建议先看一下官方文档的使用教程,他有三种方法,我这个是比较基础的。写的有点乱。对着官网写法看,会比较容易些。

官方写法:
```dart | pure
 // 方式一
  EasyRefresh(
    child: ScrollView(),
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )

我的写法:

```dart | pure
EasyRefresh(
controller: _controller,
firstRefresh: true,
onRefresh: () async {
await Future.delayed(Duration(seconds: 2), () {
print("下拉刷新-----");
getNewData();
_count = jobList.value.length;
print("最新条数" + _count.toString());
_controller.resetLoadState();
});
},
onLoad: () async {
await Future.delayed(Duration(seconds: 2), () {
print("上拉加载-----");
getMoreData();
_count = jobList.value.length;
print("加载更多条数" + _count.toString());

        _controller.finishLoad(noMore: _count >= maxSum); //这是用来防止多次上拉加载的。
      });
    },
    child: Obx(
      () => Column(
          children: 这里直接map你的数据。
          ),
    ));

```

关于国际化的问题,官方原话:不提供自带国际化支持,请自行设置ClassicalHeader和ClassicalFooter中需要展示的文字。

相关文章
|
8天前
|
存储 UED 开发者
Flutter鸿蒙版本灵活使用方法间的回调处理复杂化的逻辑
在 Flutter 开发中,灵活使用函数回调可以提高代码的可重用性、简化异步编程、增强解耦设计和提升用户体验。本文通过一个简单的示例,展示了如何在 Flutter 中实现函数调用和回调的基本使用。示例代码包括主入口、页面组件和回调函数的定义与调用,详细解析了每个部分的功能和作用。通过这种方式,开发者可以在操作完成后执行特定逻辑,使代码更易读和维护。
70 0
|
2月前
Stream 组件在 Flutter 中的具体使用方法是什么?
Stream 组件在 Flutter 中的具体使用方法是什么?
Flutter 局部变量刷新问题
Flutter 局部变量刷新问题
|
3月前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
108 1
|
3月前
|
存储 缓存 安全
Flutter Dio进阶:使用Flutter Dio拦截器实现高效的API请求管理和身份验证刷新
Flutter Dio进阶:使用Flutter Dio拦截器实现高效的API请求管理和身份验证刷新
285 0
|
5月前
|
Dart 监控 开发者
详细介绍Flutter Profiler的功能、使用方法以及如何利用它来提升应用的性能
【6月更文挑战第11天】Flutter Profiler是用于优化Flutter应用的关键工具,提供CPU、GPU、内存和网络分析。它帮助开发者监控运行时性能,识别瓶颈,如CPU过度使用、渲染问题、内存泄漏和网络效率低。通过选择分析类型、开始分析、查看结果,开发者可进行针对性优化。最佳实践包括定期分析、结合实际场景、关注关键指标及结合其他工具。有效利用Profiler能提升应用性能和用户体验。
162 2
|
5月前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
43 0
|
存储 Web App开发 缓存
Flutter Web:刷新与后退问题
使用flutter开发web页面,在pc端使用就会面临刷新的问题。尤其是刷新时,本地变量清空导致页面问题,所以就需要考虑全局缓存的问题。
1080 0
在带有背景图像的Flutter中拉动以刷新
本文主要介绍在带有背景图像的Flutter中拉动以刷新 拉动刷新”是显示动态数据列表的移动应用程序的常见任务。今天我们将使用 pull_to_refresh 包实现 pull to refresh 并利用 Slivers 创建一个自定义的 Collapsible 标头
313 0