Flutter下拉刷新上拉加载组件flutter_easyrefresh的应用

 在学习Flutter女装商城应用（只是个项目名称，和女装大佬没什么关系）中，因为视频教程中使用的是老版本的flutter_easyrefresh，我一向喜欢使用新版本，但在这个项目中，该组件使用方法上变动较大，且网上很少有新版本的用法（官方文档除外），经过翻阅文档和实际应用，最终完成，记录下来。

flutter_easyrefresh介绍

 正如名字一样，EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作，它支持几乎所有的Flutter控件。它的功能与Android的SmartRefreshLayout很相似，同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer，但是它并没有局限性，你可以很轻松的自定义。使用Flutter强大的动画，甚至随便一个简单的控件也可以完成。EasyRefresh的目标是为Flutter打造一个强大，稳定，成熟的下拉刷新框架。

flutter package：https://pub.flutter-io.cn/packages/flutter_easyrefresh
GitHub： https://github.com/xuelongqy/flutter_easyrefresh

使用过程

这里只介绍本项目中用到的方法和组件，其他方法及组件请参考以上链接；

1. 添加依赖

  flutter_easyrefresh: ^2.1.0

截止2020年3月31日 最新稳定版本为 2.1.0

2. 引入库文件

  import 'package:flutter_easyrefresh/easy_refresh.dart';

3.定义并实例化controller

  EasyRefreshController _controller;

在要使用该组件的类中定义成员变量，本文中为HomePage[StatefulWidget]

@override
void initState() {
  super.initState();
  _controller = EasyRefreshController();   
}

// 项目中没有讲到 在实例化后销毁当前页面时需要销毁该controller
@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

在initState()方法中实例化

4.在需要位置放入EasyRefresh组件并配置

return EasyRefresh(
  // 是否开启控制结束加载
  enableControlFinishLoad: false,
  // 控制器	
  controller: _controller,
  // 自定义顶部上啦加载
  footer: ClassicalFooter(
    bgColor: Colors.white,
    //  更多信息文字颜色
    infoColor: KColor.refreshTextColor,
    // 字体颜色
    textColor: KColor.refreshTextColor,
    // 加载失败时显示的文字
    loadText: KString.loadFailedText,
    // 没有更多时显示的文字
    noMoreText: '',
    // 是否显示提示信息
    showInfo: false,
    // 正在加载时的文字
    loadingText: KString.loading,
    // 准备加载时显示的文字
    loadReadyText: KString.loadReadyText,
    // 加载完成显示的文字
    loadedText: KString.loadedText,
  ),
  child: ListView(
    children: <Widget>[
      // 要加载处理的widget
      _hotGoods()
    ],
  ),
  // 上拉加载事件回调
  onLoad: () async {
    await Future.delayed(Duration(seconds: 2), () {
      // 加载热销商品
      _getHotGoods();
      // 结束加载
      _controller.finishLoad();
    });
  },

  // 下拉刷新事件回调 【本项目中没有用到】
  // onRefresh: () async {
  //   await Future.delayed(Duration(seconds: 2), () {
  //     // 事件处理
  //     // 重置刷新状态 【没错，这里用的是resetLoadState】
  //     _controller.resetLoadState();
  //   });
  // },
);


void _getHotGoods() {
    // 分页
    var formPage = {'page': page};
    // 请求数据
    request('getHotGoods', formData: formPage).then((val) {
      var data = json.decode(val.toString());
      List<Map> newGoodsList = (data['data'] as List).cast();
      // 设置热销商品数据列表
      setState(() {
        hotGoodsList.addAll(newGoodsList);
        page++;
      });
    });
  }

5.效果演示