前言

Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式。Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色的动画效果,并且对自定义支持非常好。接下来给大家介绍的就是,Flutter版本的刷新UI库—flutter_easyrefresh,在功能方面已经很接近Android的SmartRefreshLayout。

Github地址:flutter_easyrefresh

介绍

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

Demo:下载 apk | web

frc 57f0b356ff3611d5a54dbc3ad0479570 - Flutter上拉加载下拉刷新---flutter_easyrefresh

特点功能:

  • 支持绝大多数Widget
  • 支持自定义并且已经集成了很多炫酷的 Header 和 Footer
  • 支持下拉刷新、上拉加载(可控制触发)
  • 支持 Header 和 Footer 列表嵌入以及视图浮动两种形式
  • 支持列表事件监听,制作任何样子的 Header 和 Footer,并且能够放在任何位置
  • 支持首次刷新,并自定义视图
  • 支持自定义列表空视图

传送门

  • 属性文档
  • 常见问题
  • 更新日志
  • 自定义Header和Footer

项目演示

基本样式个人中心
frc 47a53fd80a27238612c2fc088be87473 - Flutter上拉加载下拉刷新---flutter_easyrefresh
frc 16feefe83da37b8102829d96b1816784 - Flutter上拉加载下拉刷新---flutter_easyrefresh
BasicPage[UserProfilePage]
NestedScrollViewHeader连接器
frc e697b580bcf838806226be88fe8d4dcf - Flutter上拉加载下拉刷新---flutter_easyrefresh
frc 46fcf17de5ad17ff1c53499cff0841f2 - Flutter上拉加载下拉刷新---flutter_easyrefresh
NestedScrollViewPageLinkHeaderPage
首次刷新空视图
frc 4c93e8c30cf710ee0a043778dc1b3051 - Flutter上拉加载下拉刷新---flutter_easyrefresh
frc 88da5423a4edb463a318768f369925b9 - Flutter上拉加载下拉刷新---flutter_easyrefresh
FirstRefreshPageEmptyPage
二楼聊天页面
frc f2356cfb3001cc5f1a010eec6722c11f - Flutter上拉加载下拉刷新---flutter_easyrefresh
frc f0d0dcba230094ad5a6935f49bb57ca3 - Flutter上拉加载下拉刷新---flutter_easyrefresh
SecondFloorPageChatPage

样式演示

MaterialBallPulse
frc 8cfec25b26f712f20b762ee2cffef2cd - Flutter上拉加载下拉刷新---flutter_easyrefresh
frc 628fcea06c430741dc703a91a22412e2 - Flutter上拉加载下拉刷新---flutter_easyrefresh
MaterialPageBallPulsePage
BezierCircleBezierHourGlass
frc 89789de09248ef8032ec3cf8512c42fe - Flutter上拉加载下拉刷新---flutter_easyrefresh
frc 8c9917638f2d6e134bb259f12c4523a8 - Flutter上拉加载下拉刷新---flutter_easyrefresh
BezierCirclePageBezierHourGlassPage
PhoenixDelivery
frc e4ca36220bd412b68b9d9622b195fe79 - Flutter上拉加载下拉刷新---flutter_easyrefresh
frc 336a10e084d3d46e810cfef80df6fb6f - Flutter上拉加载下拉刷新---flutter_easyrefresh
PhoenixPageTaurusPage
SpaceDelivery
frc 62412d34bf104f03d2e4754a405d5e13 - Flutter上拉加载下拉刷新---flutter_easyrefresh
frc 5c56f935cae4bc3292734d01d08db844 - Flutter上拉加载下拉刷新---flutter_easyrefresh
SpacePageDeliveryPage

简单用例

1.在 pubspec.yaml 中添加依赖

//pub方式
dependencies:
  flutter_easyrefresh: ^2.1.1

//导入方式
dependencies:
  flutter_easyrefresh:
    path: 项目路径

//git方式
dependencies:
  flutter_easyrefresh:
    git:
      url: git://github.com/xuelongqy/flutter_easyrefresh.git

2.在布局文件中添加 EasyreFresh

import 'package:flutter_easyrefresh/easy_refresh.dart';
....
  // 方式一
  EasyRefresh(
    child: ScrollView(),
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )
  // 方式二
  EasyRefresh.custom(
    slivers: [],
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )
  // 方式三
  EasyRefresh.builder(
    builder: (context, physics, header, footer) {
      return CustomScrollView(
        physics: physics,
        slivers: [
          ...
          header,
          ...
          footer,
        ],
      );
    }
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )

3.触发刷新和加载动作

  EasyRefreshController _controller = EasyRefreshController();
  ....
  EasyRefresh(
    controller: _controller,
    ....
  );
  ....
  _controller.callRefresh();
  _controller.callLoad();

4.控制加载和刷新完成

  EasyRefreshController _controller = EasyRefreshController();
  ....
  EasyRefresh(
    enableControlFinishRefresh: true,
    enableControlFinishLoad: true,
    ....
  );
  ....
  _controller.finishRefresh(success: true);
  _controller.finishLoad(success: true, noMore: false);

使用指定的 Header 和 Footer

import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_easyrefresh/material_header.dart';
import 'package:flutter_easyrefresh/material_footer.dart';
....
  new EasyRefresh(
    header: MaterialHeader(),
    footer: MaterialFooter(),
    child: ScrollView(),
    ....
  )

添加国际化支持

import 'package:flutter_easyrefresh/easy_refresh.dart';
....
  /// 如果没有您当前的语言支持
  /// 您可以使用strings_en.arb进行翻译并命名为strings_{languageCode}_{countryCode}.arb
  /// 然后进行Pull requests
  new MaterialApp(
    localizationsDelegates: [
      GlobalEasyRefreshLocalizations.delegate,
      ....
    ],
    supportedLocales: [
        Locale('en', ''),
        Locale('zh', 'CN'),
        ....
    ]
    ....
  )

QQ讨论群 – 554981921

进群须知

这个群不仅仅是解决EasyreFresh的问题,任何Flutter相关的问题都可以进行讨论。正如它的名字一样,有问必答,只要群主有时间,都会帮大家一起解决问题。

Flutter上拉加载下拉刷新—flutter_easyrefresh