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中需要展示的文字。

相关文章
|
5天前
|
数据库 容器
Flutter笔记:滚动之-无限滚动与动态加载的实现
Flutter笔记:滚动之-无限滚动与动态加载的实现
93 0
|
Android开发
flutter中实现仿Android端的onResume和onPause方法
flutter中实现仿Android端的onResume和onPause方法
|
5天前
|
开发框架 前端开发 UED
【Flutter前端技术开发专栏】Flutter中的下拉刷新与上拉加载更多
【4月更文挑战第30天】在Flutter移动应用开发中,下拉刷新和上拉加载更多能提升用户体验和用户参与度。通过`RefreshIndicator`组件和`ScrollController`实现下拉刷新与上拉加载。`RefreshIndicator`包裹可滚动Widget,`ScrollController`监听滚动事件以判断是否到达底部。性能优化包括避免重复加载、使用防抖技术和异步加载数据。参考Flutter官方文档和相关教程可进一步学习。
【Flutter前端技术开发专栏】Flutter中的下拉刷新与上拉加载更多
|
5天前
|
Linux Android开发 iOS开发
Flutter笔记:滑块及其实现分析1
Flutter笔记:滑块及其实现分析1
128 0
|
8月前
|
数据库 容器
Flutter笔记:无限滚动与动态加载的实现
在 Flutter 中,实现一个无尽滚动列表通常涉及使用 ListView、ListView.builder 或 ListView.separated 组件,并结合数据源和滚动控制器。这使得你可以加载和显示大量数据,只有在需要时才会动态加
159 0
|
11月前
|
容器
Flutter实现圆形头像的几种方法
Flutter实现圆形头像的几种方法
|
前端开发
Flutter 之列表下拉刷新和上拉加载
在实际的 App 中,下拉刷新和上滑加载更多是非常常见的交互形式。在 Flutter 中,有 flutter_easyrefresh开源插件用于实现下拉刷新和上滑加载更多。本篇介绍了有状态组件和 flutter_easyrefresh 的基本应用,同时使用模拟的方式完成了异步数据加载。
616 0
Flutter 之列表下拉刷新和上拉加载
Flutter 滑动删除
Flutter 滑动删除
325 0
【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )
【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )
521 0
【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )
【Flutter】ListView 列表高级功能 ( RefreshIndicator 下拉刷新组件 )
【Flutter】ListView 列表高级功能 ( RefreshIndicator 下拉刷新组件 )
388 0
【Flutter】ListView 列表高级功能 ( RefreshIndicator 下拉刷新组件 )