五、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

上拉刷新下拉加载.jpg 关注公众号，查看更多内容.jpg