Flutter 页面下拉刷新和上拉加载

flutter_easyrefresh

正如名字同样，EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操做，它支持几乎全部的Flutter控件。它的功能与Android的SmartRefreshLayout很类似，一样也吸收了不少三方库的优势。EasyRefresh中集成了多种风格的Header和Footer，可是它并无局限性，你能够很轻松的自定义。使用Flutter强大的动画，甚至随便一个简单的控件也能够完成。EasyRefresh的目标是为Flutter打造一个强大，稳定，成熟的下拉刷新框架。github地址：https://github.com/xuelongqy/flutter_easyrefresh

特色功能:

• 支持Andorid(光晕)，ios(越界回弹)效果
• 支持绝大多数Widget
• 支持自定义而且已经集成了不少炫酷的 Header 和 Footer
• 支持下拉刷新、上拉加载(可自动)
• 支持 Header 和 Footer 列表嵌入以及视图浮动两种形式
• 支持列表事件监听，制做任何样子的 Header 和 Footer，而且可以放在任何位置
• 支持首次刷新，并自定义视图
• 支持自定义列表空视图

此次就用easy_refresh插件，实现下拉刷新以及上拉加载功能。

1.在 pubspec.yaml 中添加依赖：

flutter_easyrefresh: ^1.2.7

而后页面引入：

import 'package:flutter_easyrefresh/easy_refresh.dart';

2.在布局文件中添加 EasyreFresh

// 方式一
 EasyRefresh( child: ScrollView(), onRefresh: () async{ .... }, onLoad: () async { .... }, ) // 方式二
 EasyRefresh.custom( slivers: <Widget>[], onRefresh: () async{ .... }, onLoad: () async { .... }, ) // 方式三
 EasyRefresh.builder( builder: (context, physics, header, footer) { return CustomScrollView( physics: physics, slivers: <Widget>[ ... 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.callLoad(success： true, noMore: false);

制做上拉加载效果示例

http://www.javashuo.com/article/p-buugrytt-ea.html