在pubspec.yaml进行添加。
下拉刷新上拉加载
flutter_easyrefresh: ^2.0.5
Pub get一下
下面我就以flutter_easyrefresh这个插件进行讲解。
1、首先我们要使用它的header,也就是刷新提示,它的源码是ClassicalHeader这个类,我们继承它,并把它所有的属性、方法都重写即可,代码如下:
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:nursery_school_gardener/view/util/ColorUtils.dart';
class CustomRefreshHeader extends ClassicalHeader {
/// Key
final Key key;
/// 方位
final AlignmentGeometry alignment;
/// 提示刷新文字
final String refreshText;
/// 准备刷新文字
final String refreshReadyText;
/// 正在刷新文字
final String refreshingText;
/// 刷新完成文字
final String refreshedText;
/// 刷新失败文字
final String refreshFailedText;
/// 没有更多文字
final String noMoreText;
/// 显示额外信息(默认为时间)
final bool showInfo;
/// 更多信息
final String infoText;
/// 背景颜色
final Color bgColor;
/// 字体颜色
final Color textColor;
/// 更多信息文字颜色
final Color infoColor;
CustomRefreshHeader({
extent = 60.0,
triggerDistance = 70.0,
float = false,
completeDuration = const Duration(seconds: 1),
enableInfiniteRefresh = false,
enableHapticFeedback = true,
this.key,
this.alignment,
this.refreshText: "下拉刷新",
this.refreshReadyText: "释放刷新",
this.refreshingText: "刷新中...",
this.refreshedText: "刷新完成",
this.refreshFailedText: "刷新失败",
this.noMoreText: "没有更多",
this.showInfo: true,
this.infoText: "更新时间 %T",
this.bgColor: ColorUtils.CLEAR,
this.textColor: ColorUtils.TEXT_GRAY,
this.infoColor: ColorUtils.TEXT_GRAY,
}) : super(
extent: extent,
triggerDistance: triggerDistance,
float: float,
completeDuration: float
? completeDuration == null
? Duration(
milliseconds: 400,
)
: completeDuration +
Duration(
milliseconds: 400,
)
: completeDuration,
enableInfiniteRefresh: enableInfiniteRefresh,
enableHapticFeedback: enableHapticFeedback,
);
2、首先我们要使用它的footer,也就是加载提示,它的源码是ClassicalFooter这个类,我们继承它,并把它所有的属性、方法都重写即可,代码如下:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:nursery_school_gardener/view/util/ColorUtils.dart';
class CustomRefreshFooter extends ClassicalFooter {
/// Key
final Key key;
/// 方位
final AlignmentGeometry alignment;
/// 提示加载文字
final String loadText;
/// 准备加载文字
final String loadReadyText;
/// 正在加载文字
final String loadingText;
/// 加载完成文字
final String loadedText;
/// 加载失败文字
final String loadFailedText;
/// 没有更多文字
final String noMoreText;
/// 显示额外信息(默认为时间)
final bool showInfo;
/// 更多信息
final String infoText;
/// 背景颜色
final Color bgColor;
/// 字体颜色
final Color textColor;
/// 更多信息文字颜色
final Color infoColor;
CustomRefreshFooter({
extent = 60.0,
triggerDistance = 70.0,
float = false,
completeDuration = const Duration(seconds: 1),
enableInfiniteLoad = true,
enableHapticFeedback = true,
this.key,
this.alignment,
this.loadText: "上拉加载",
this.loadReadyText: "释放加载",
this.loadingText: "加载中...",
this.loadedText: "加载完成",
this.loadFailedText: "加载失败",
this.noMoreText: "没有更多",
this.showInfo: true,
this.infoText: "更新时间 %T",
this.bgColor: Colors.transparent,
this.textColor: ColorUtils.TEXT_GRAY,
this.infoColor: ColorUtils.TEXT_GRAY,
}) : super(
extent: extent,
triggerDistance: triggerDistance,
float: float,
completeDuration: completeDuration,
enableInfiniteLoad: enableInfiniteLoad,
enableHapticFeedback: enableHapticFeedback,
);
}
具体使用。
EasyRefresh.custom(
controller: easyRefreshController,//上面创建的刷新控制器
header: CustomRefreshHeader(),//自定义刷新头(如果想更改背景色等,可以在小括号内设置属性,都有哪些属性,可以点击这个类自行查看)
footer: CustomRefreshFooter(),//自定义加载尾(如果想更改背景色等,可以在小括号内设置属性,都有哪些属性,可以点击这个类自行查看)
onRefresh: () async {
// 设置两秒后关闭刷新,时间可以随便设置,根据项目需求,正常在请求成功后,也要关闭
await Future.delayed(const Duration(seconds: 2), () {
setState(() {
// 控制器关闭刷新功能
easyRefreshController.finishRefresh(success: true);
});
});
},
onLoad: () async {
// 设置两秒后关闭加载,时间可以随便设置,根据项目需求,正常在请求成功后,也要关闭
await Future.delayed(const Duration(seconds: 2), () {
setState(() {
// 控制器关闭加载功能,还可以设置没有更多数据noMore,可以根据需求自己变更,这里同样也需要在数据请求成功进行关闭。
easyRefreshController.finishLoad(success: true);
});
});
},
slivers: <Widget>[
// 这里设置列表
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
// 这里为iOS UITableViewCell (android的adapter),样式大家自定义即可
return ListItemViewWidget(index: index,);
},
// 设置返回数据个数
childCount: dataList.length),
),
],
),
class ListItemViewWidget extends StatelessWidget {
const ListItemViewWidget({
Key? key, required this.index,
}) : super(key: key);
final int index;
@override
Widget build(BuildContext context) {
return Container(
height: 65,
color: Colors.primaries[index % Colors.primaries.length],
child: Text('SliverChildBuilderDelegate_$index'),
);
}
}
[参照]{https://blog.csdn.net/WangQingLei0307/article/details/118342972}
网友评论