Flutter: flutter_easyrefresh下拉刷新，上拉加载更多

一、插件

1. flutter_easyrefresh（本文所用）
2. pull_to_refresh

二、重写插件中的类

（1）refresh_header.dart文件

import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';

/**
 * 使用的插件flutter_easyrefresh
 * 首先，要使用它的header，也就是刷新提示，它的源码是ClassicalHeader这个类，继承它，并把它所有的属性、方法都重写。
 */

class RefreshHeader 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;

  RefreshHeader({
    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 = Colors.transparent,
    this.textColor = Colors.black,
    this.infoColor = Colors.teal,
  }) : super(
          extent: extent,
          triggerDistance: triggerDistance,
          float: float,
          completeDuration: float
              ? completeDuration == null
                  ? Duration(
                      milliseconds: 400,
                    )
                  : completeDuration  
                      Duration(
                        milliseconds: 400,
                      )
              : completeDuration,
          enableInfiniteRefresh: enableInfiniteRefresh,
          enableHapticFeedback: enableHapticFeedback,
        );
}

（2）refresh_footer.dart文件

import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';

/**
 * 使用的插件flutter_easyrefresh
 * 要使用它的footer，也就是加载提示，它的源码是ClassicalFooter这个类，继承它，并把它所有的属性、方法都重写即可
 */

class RefreshFooter 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;

  RefreshFooter({
    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 = Colors.black,
    this.infoColor = Colors.teal,
  }) : super(
          extent: extent,
          triggerDistance: triggerDistance,
          float: float,
          completeDuration: completeDuration,
          enableInfiniteLoad: enableInfiniteLoad,
          enableHapticFeedback: enableHapticFeedback,
        );
}

三、实际应用

  EasyRefreshController easyRefreshController = EasyRefreshController();
  bool isLoad = true; //防止load多次加载
  bool isFooter = true;//是否展示底部加载状态
  bool noMore = false;//没有更多数据

  onRefresh(){
      /**获取第一页数据*/
   }
 
  onLoad(){
     if(/*数据请求成功*/){
         setState((){
             noMore = false;
         });
     }else {
         /**没有更多的数据*/
         setState((){
             noMore = true;
         });     
     }
 }
  
    //上拉加载: 加载1s后不展示"加载完成"，
    //再过1s，isFooter恢复为true
  void loadingBottomControl() {
    Future.delayed(const Duration(milliseconds: 1000), () {
      setState(() {
        isFooter = false;
        Future.delayed(const Duration(milliseconds: 1000), () {
          setState(() {
            isFooter = true;
            isLoad = true; //设置成true，可以加载
            print('!!!!!loadingBottomControl----------->>>>>isFooter = ${isFooter},isLoad = ${isLoad}');
          });
        });
      });
    });
  }

child: EasyRefresh(
                      controller: easyRefreshController,
                      header: RefreshHeader(),
                      footer: RefreshFooter(),
                      onRefresh: () async {
                        onRefresh();
                        easyRefreshController.finishRefresh(success: true);
                      },
                      onLoad: isFooter
                          ? () async {
                              Future.delayed(Duration.zero, () async {
                                await onLoad();                             
                                easyRefreshController.finishLoad(
                                    success: true,
                                    noMore: noMore
                                );
                              });
                            }
                          : null,
                      child: showView()),

参考：
https://blog.csdn.net/WangQingLei0307/article/details/118342972

这篇好文章是转载于：学新通技术网