首选感谢作者的无私奉献,项目地址是:
https://github.com/xuelongqy/flutter_easyrefresh
项目介绍:
正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件,但前提是需要包裹成ScrollView。它的功能与Android的SmartRefreshLayout很相似,同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer,但是它并没有局限性,你可以很轻松的自定义。使用Flutter强大的动画,甚至随便一个简单的控件也可以完成。EasyRefresh的目标是为Flutter打造一个强大,稳定,成熟的下拉刷新框架。
特点:
1. 支持Andorid(光晕),ios(越界回弹)效果
2. 支持绝大多数Widget
3. 支持自定义并且已经集成了很多炫酷的 Header 和 Footer
4. 支持下拉刷新、上拉加载(可自动)
5. 支持 Header 和 Footer 列表嵌入以及视图浮动两种形式
6. 支持列表事件监听,制作任何样子的 Header 和 Footer,并且能够放在任何位置
7. 支持首次刷新,并自定义视图
8. 支持自定义列表为空时的视图,仅限于ScrollView
听闻最近在开发2.0版本,期待能尽快发布。
https://github.com/xuelongqy/flutter_easyrefresh/blob/master/example/lib/page/sample/basic_page.dart
import 'dart:async';
import 'package:example/generated/translations.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
/// 基本使用页面
class BasicPage extends StatefulWidget {
@override
_BasicPageState createState() => _BasicPageState();
}
class _BasicPageState extends State<BasicPage> {
List<String> addStr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
List<String> str = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
GlobalKey<EasyRefreshState> _easyRefreshKey =
new GlobalKey<EasyRefreshState>();
GlobalKey<RefreshHeaderState> _headerKey =
new GlobalKey<RefreshHeaderState>();
GlobalKey<RefreshFooterState> _footerKey =
new GlobalKey<RefreshFooterState>();
bool _loadMore = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(Translations.of(context).text("basicUse")),
),
body: Center(
child: new EasyRefresh(
key: _easyRefreshKey,
behavior: ScrollOverBehavior(),
refreshHeader: ClassicsHeader(
key: _headerKey,
refreshText: Translations.of(context).text("pullToRefresh"),
refreshReadyText: Translations.of(context).text("releaseToRefresh"),
refreshingText: Translations.of(context).text("refreshing") + "...",
refreshedText: Translations.of(context).text("refreshed"),
moreInfo: Translations.of(context).text("updateAt"),
bgColor: Colors.transparent,
textColor: Colors.black87,
moreInfoColor: Colors.black54,
showMore: true,
),
refreshFooter: ClassicsFooter(
key: _footerKey,
loadText: Translations.of(context).text("pushToLoad"),
loadReadyText: Translations.of(context).text("releaseToLoad"),
loadingText: Translations.of(context).text("loading"),
loadedText: Translations.of(context).text("loaded"),
noMoreText: Translations.of(context).text("noMore"),
moreInfo: Translations.of(context).text("updateAt"),
bgColor: Colors.transparent,
textColor: Colors.black87,
moreInfoColor: Colors.black54,
showMore: true,
),
child: new ListView.builder(
//ListView的Item
itemCount: str.length,
itemBuilder: (BuildContext context, int index) {
return new Container(
height: 70.0,
child: Card(
child: new Center(
child: new Text(
str[index],
style: new TextStyle(fontSize: 18.0),
),
),
));
}),
onRefresh: () async {
await new Future.delayed(const Duration(seconds: 1), () {
setState(() {
str.clear();
str.addAll(addStr);
_easyRefreshKey.currentState.waitState(() {
setState(() {
_loadMore = true;
});
});
});
});
},
loadMore: _loadMore
? () async {
await new Future.delayed(const Duration(seconds: 1), () {
if (str.length < 20) {
setState(() {
str.addAll(addStr);
});
} else {
_easyRefreshKey.currentState.waitState(() {
setState(() {
_loadMore = false;
});
});
}
});
}
: null,
)),
persistentFooterButtons: <Widget>[
FlatButton(
onPressed: () {
_easyRefreshKey.currentState.callRefresh();
},
child: Text(Translations.of(context).text("refresh"),
style: TextStyle(color: Colors.black))),
FlatButton(
onPressed: () {
_easyRefreshKey.currentState.callLoadMore();
},
child: Text(Translations.of(context).text("loadMore"),
style: TextStyle(color: Colors.black)))
], // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
最近在群里,老有群友提到noMoreText显示的问题,即,loadMore()的时候,不论还有没有数据,底部文字总是会显示noMoreText没有更多了,其实只需要注意官方的例子中以下代码:
loadMore: _loadMore
? () async {
await new Future.delayed(const Duration(seconds: 1), () {
if (str.length < 20) {
setState(() {
str.addAll(addStr);
});
} else {
_easyRefreshKey.currentState.waitState(() {
setState(() {
_loadMore = false;
});
});
}
});
}
: null,
比如在我的代码中,是这样的:
onRefresh: () async {
await bloc.getArticlePageList();
},
loadMore: () async {
await bloc.loadMore();
},
注意 async和await的这个操作即可。