五、Flutter上拉刷新下拉加载（flutter 下拉）

目录

一、集成flutter_easyrefresh

二、在布局文件中添加 EasyreFresh

三、触发刷新和加载动作

四、使用指定的 Header 和 Footer

五、flutter run

这篇文章是在前几篇文章的基础上写的，如有不明白的地方可以看看前面的文章，当然也可在下面留言。Flutter默认不支持上拉加载，下拉刷新也仅仅支持Material的一种样式，所以这里用flutter_easyrefresh来实现ListView上拉刷新下拉加载。

一、集成flutter_easyrefresh

pubspec.yaml 中 添加flutter_easyrefresh: ^1.2.7，并同步 flutter packages get 。

在相应的 .dart 文件中添加引用import 'package:flutter_easyrefresh/easy_refresh.dart'。

 dependencies:
 flutter:
 sdk: flutter
 # The following adds the Cupertino Icons font to your application.
 # Use with the CupertinoIcons class for iOS style icons.
 cupertino_icons: ^0.1.2
 dio: ^2.1.10
 fluttertoast: ^3.1.0
 flutter_swiper: ^1.1.6
 cached_network_image: ^1.0.0
 flutter_easyrefresh: ^1.2.7
 date_format: ^1.0.6 

二、在布局文件中添加 EasyreFresh

Widget _customListView() {
 return CustomScrollView(
 slivers: <Widget>[
 // 如果不是Sliver家族的Widget，需要使用SliverToBoxAdapter做层包裹
 SliverToBoxAdapter(
 child: Container(
 height: 180,
 color: Colors.green,
 child: ConstrainedBox(
 child: Swiper(
 outer: false,
 itemBuilder: (c, i) {
 if (swiperDataList != null) {
 return CachedNetworkImage(
 imageUrl: "${swiperDataList[i]}",
 placeholder: (context, url) =>
 new CircularProgressIndicator(),
 errorWidget: (context, url, error) =>
 new Icon(Icons.error),
 fit: BoxFit.fill,
 );
 }
 },
 pagination:
 new SwiperPagination(margin: new EdgeInsets.all(5.0)),
 itemCount: swiperDataList == null ? 0 : swiperDataList.length,
 ),
 constraints: new BoxConstraints.loose(
 new Size(MediaQuery.of(context).size.width, 180.0))),
 ),
 ),
 // 当列表项高度固定时，使用 SliverFixedExtendList 比 SliverList 具有更高的性能
 SliverFixedExtentList(
 delegate: SliverChildBuilderDelegate(this._getItems,
 childCount: listData == null ? 0 : listData.length),
 itemExtent: 60.0)
 ],
 );
 }

三、触发刷新和加载动作

 // 如果不需要可以不用设置EasyRefresh的key
GlobalKey<EasyRefreshState> _easyRefreshKey = new GlobalKey<EasyRefreshState>();
 GlobalKey<RefreshHeaderState> _headerKey = new GlobalKey<RefreshHeaderState>();
 GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>();

四、使用指定的 Header 和 Footer

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('轮播图'),
 ),
 body:EasyRefresh(
 key: _easyRefreshKey,
 autoLoad: true,
 firstRefresh: true,
 behavior: ScrollOverBehavior(),
 refreshHeader: ClassicsHeader(
 key: _headerKey,
 refreshText: "下拉刷新",
 refreshReadyText: "松开后开始刷新",
 refreshingText: "正在刷新...",
 refreshedText: "刷新完成",
 moreInfo: "${formatDate(DateTime.now(), [yyyy, '-', mm, '-', dd,' ',HH, ':', nn,':', ss])}",
 bgColor: Colors.transparent,
 textColor: Colors.black87,
 moreInfoColor: Colors.black54,
 showMore: true,
 ),
 refreshFooter: ClassicsFooter(
 key: _footerKey,
 loadText: "上拉加载更多",
 loadReadyText: "松开后开始加载",
 loadingText: "正在加载...",
 loadedText: "加载完成",
 noMoreText: "没有更多内容了",
 moreInfo: "${formatDate(DateTime.now(), [yyyy, '-', mm, '-', dd,' ',HH, ':', nn,':', ss])}",
 bgColor: Colors.transparent,
 textColor: Colors.black87,
 moreInfoColor: Colors.black54,
 showMore: true,
 ),
 child: this._customListView(),
 onRefresh: (){
 this._curPage=1;
 this._loadData(this._curPage);
 },
 loadMore:()async{
 this._curPage++;
 this._loadData(this._curPage);
 } ,
 )
 );
 }

五、flutter run