Flutter学习四之实现一个支持刷新加载的列表

上一篇文章用Scaffold widget搭建了一个带底部导航栏的的项目架构，这篇文章就来介绍一下在flutter中怎么实现一个带下拉刷新和上拉加载更多的一个列表，这里用到了pull_to_refresh的第三方库。

1、在pubspec.yaml文件中加入一行代码，导入第三方库。

 dependencies:
     pull_to_refresh: ^1.6.1

2、新建一个类，继承自StatefulWidget来添加一个新的页面，在build方法中，返回一个 Scaffold 控件，在appbar参数中可以定义你想要的标题栏样式，在body参数中定义你要实现页面的主题内容，这里我要实现一个带刷新和加载功能的列表，所以我们在外层嵌套一个pull_to_refresh库中的SmartRefresher控件，下面是该控件的构造方法，支持下面这些参数，常用的参数都已经备注。

SmartRefresher(
      {Key key,
      @required this.controller,//控制内部状态 ，必选参数
      this.child, //你的内容部件
      this.header, //头部指示器构造，默认值 ClassicHeader
      this.footer, //尾部指示器构造  默认值 ClassicHeader
      this.enablePullDown: true, //激活下拉刷新，默认开启
      this.enablePullUp: false,// 激活上拉加载更多，默认关闭
      this.enableTwoLevel: false, //是否允许打开头部指示器二楼的功能，默认不允许
      this.onRefresh, //进入下拉刷新时的回调
      this.onLoading, //进入上拉加载时的回调
      this.onTwoLevel, //当准备打开二楼时的回调
      this.onOffsetChange,
      this.dragStartBehavior,
      this.primary,
      this.cacheExtent,
      this.semanticChildCount,
      this.reverse,
      this.physics,
      this.scrollDirection,
      this.scrollController})

其中有一个必传参数，controller（@required修饰的参数表示必传的意思），该参数是RefreshController类型参数，可以通过该对象的一些方法主动触发下拉刷新，上拉加载，开启二楼等主动功能，

 //  请求顶部指示器刷新,触发onRefresh
      void requestRefresh(
          {Duration duration: const Duration(milliseconds: 300),
          Curve curve: Curves.linear});
     // 请求底部指示器加载数据,触发onLoading
      void requestLoading(
          {Duration duration: const Duration(milliseconds: 300),
          Curve curve: Curves.linear}) ;
      //  主动打开二楼
      void requestTwoLevel(
                {Duration duration: const Duration(milliseconds: 300),
                Curve curve: Curves.linear});

      // 顶部指示器刷新成功,是否要还原底部没有更多数据状态
      void refreshCompleted({bool resetFooterState:false});
      // 不显示任何状态,直接变成idle状态隐藏掉
      void refreshToIdle();
      // 顶部指示器刷新失败
      void refreshFailed();
      // 关闭二楼
      void twoLevelComplete(
       {Duration duration: const Duration(milliseconds: 500),
       Curve curve: Curves.linear};
      // 底部指示器加载完成
      void loadComplete();
      // 底部指示器进入一个没有更多数据的状态
      void loadNoData();
      // 底部加载失败
      void loadFailed()
      // 刷新底部指示器状态为idle
      void resetNoData();

更多功能可以参考pull_to_refresh主页，这是目前dart中功能最全的刷新加载更多组件拉。

3、在StatefulWidget中嵌套一个列表组件，在flutter中官方给我们提供了一个可以用来加载列表数据的一个组件ListView，和Android中的ListView控件名称一样，很容易理解。

但是一般情况下我们会用ListView.builder的来构建一个列表组件，因为直接使用ListView构建的时候，不管有多少条数据都会一次性加载出来，但是ListView.builder构建的话，有一个延时加载策略，值加载当前屏幕显示的数据，相对而言其性能会更好写。所以当数据比较多的时候，推荐用ListView.builder构建来构建列表组件。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("文章列表")),
        body: SmartRefresher(
            controller: _refreshController,
            enablePullUp: true,
            onRefresh: onRefresh, //自定义的刷新方法
            onLoading: loadMore,  //自定义加载更多方法
            header: WaterDropHeader(),
            footer: ClassicFooter(),
            child: ListView.builder(
                itemBuilder: (context, index) => ItemPage(_articles[index]),
                itemCount: _articles.length)));
  }

这里要注意一个问题，之前我一位ListView如果想要填充满整个屏幕的话是需要设置高度充满的，所以我就自作聪明的在ListView的外面嵌套来一个Expanded 来填充布局铺满屏幕，结果弄来半天，都不能手动下拉刷新和加载更多，最后，分析发现是填充的问题，结果去掉之后就ok了，并且ListView和Android 中一样都是可以根据item的个数自动适应是否铺满全屏，所以外面不需要再嵌套其他的约束组件来。