Flutter 下拉刷新、上拉加载flutter_easyrefresh的使用

image.png

在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: [
          // 这里设置列表
          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}