flutter easy_refresh 3.xx版本的刷新加载框架

flutter easy_refresh 3.xx版本的刷新加载框架

---

前言

在最近写项目的时候发现easy_refresh框架好像已经迁移至了3.x的版本，写下这篇文章的目的是发现现在网上绝大多版本都是2.xx的，似乎好像已经不在维护了。

---

一、easy_refresh是什么？

为防止有新手查看还是在这里引用一下此框架作者对该框架的描述：

正如名字一样，EasyRefresh可以轻松实现Flutter应用上的下拉刷新和上拉加载。它支持几乎所有的 Flutter Scrollable widget。它的功能和Android的SmartRefreshLayout非常相似，同时也吸收了很多第三方库的优点。EasyRefresh集成了各种样式的Header和Footer，但它没有任何限制，您可以轻松自定义它。使用Flutter强大的动画，即使只是简单的控制也可以完成。EasyRefresh的目标是为Flutter打造一个强大、稳定、成熟的拉刷新框架。

二、使用步骤

1.在 pubspec.yaml 中添加依赖

引入依赖的方式有pub方式、导入方式、git方式，在此我使用自己常用的pub方式

dependencies:
  easy_refresh: version

2.默认构造函数

 EasyRefresh(
    onRefresh: () async {
      ....
    },
    onLoad: () async {
      ....
    },
    child: ListView(),
  );

其中onRefresh内执行的是下拉刷新后的执行语句，onLoad内执行的是上拉加载的执行语句

3.构建器构造函数

官方推荐，如果存在滚动嵌套，请使用 EasyRefresh.builder 或使用 ScrollConfiguration 设置范围。

EasyRefresh.builder(
    onRefresh: () async {
      ....
      return IndicatorResult.success; 
    },
    onLoad: () async {
      ....
    },
    childBuilder: (context, physics) {
      return ListView(
        physics: physics,
      );
    },
  );

4.指示灯定位

EasyRefresh(
    header: Header(
      position: IndicatorPosition.locator,
    ),
    footer: Footer(
      position: IndicatorPosition.locator,
    ),
    onRefresh: () async {
      ....
    },
    onLoad: () async {
      ....
      return IndicatorResult.noMore;
    },
    child: CustomScrollView(
      slivers: [
        SliverAppBar(),
        const HeaderLocator.sliver(),
        ...
        const FooterLocator.sliver(),
      ],
    ),
  );

其中header代表的是设置刷新头组件，footer代表的是设置底部加载组件

5.相对2.x版本的不同点

其他属性设置就不一一介绍了，有兴趣的大家可以看看源码了解，在这里简单介绍一下我在使用3.x版本发现与2.x版本较为直观的不同点。

1.新增 fit属性
这个属性是2.x没有的。它是接收StackFit值，默认值是StackFit.loose，具体表现在滑动范围仅在内容可见区域，尽管EasyRefresh的区域已经是铺满屏幕了，但是可滑动区域仅在该组件下child的可见区域。设置StackFit.expand后可以发现EasyRefresh的区域内都可滑动。
2. emptyWidget属性消失了
这个改动的设计理念目前还不知道缘由，在3.x版本中好像也没有与之替换的属性

总结

本文仅仅简单介绍了新版EasyRefresh组件的使用，还有一些属性目前不知道具体使用场景，以后知道了再补充吧