上一篇文章用Scaffold widget搭建了一個(gè)帶底部導(dǎo)航欄的的項(xiàng)目架構(gòu)，這篇文章就來介紹一下在flutter中怎么實(shí)現(xiàn)一個(gè)帶下拉刷新和上拉加載更多的一個(gè)列表，這里用到了pull_to_refresh的第三方庫。

1、在pubspec.yaml文件中加入一行代碼，導(dǎo)入第三方庫。

 dependencies:
     pull_to_refresh: ^1.6.1

2、新建一個(gè)類，繼承自StatefulWidget來添加一個(gè)新的頁面，在build方法中，返回一個(gè) Scaffold 控件，在appbar參數(shù)中可以定義你想要的標(biāo)題欄樣式，在body參數(shù)中定義你要實(shí)現(xiàn)頁面的主題內(nèi)容，這里我要實(shí)現(xiàn)一個(gè)帶刷新和加載功能的列表，所以我們?cè)谕鈱忧短滓粋€(gè)pull_to_refresh庫中的SmartRefresher控件，下面是該控件的構(gòu)造方法，支持下面這些參數(shù)，常用的參數(shù)都已經(jīng)備注。

SmartRefresher(
      {Key key,
      @required this.controller,//控制內(nèi)部狀態(tài) ，必選參數(shù)
      this.child, //你的內(nèi)容部件
      this.header, //頭部指示器構(gòu)造，默認(rèn)值 ClassicHeader
      this.footer, //尾部指示器構(gòu)造  默認(rèn)值 ClassicHeader
      this.enablePullDown: true, //激活下拉刷新，默認(rèn)開啟
      this.enablePullUp: false,// 激活上拉加載更多，默認(rèn)關(guān)閉
      this.enableTwoLevel: false, //是否允許打開頭部指示器二樓的功能，默認(rèn)不允許
      this.onRefresh, //進(jìn)入下拉刷新時(shí)的回調(diào)
      this.onLoading, //進(jìn)入上拉加載時(shí)的回調(diào)
      this.onTwoLevel, //當(dāng)準(zhǔn)備打開二樓時(shí)的回調(diào)	
      this.onOffsetChange,
      this.dragStartBehavior,
      this.primary,
      this.cacheExtent,
      this.semanticChildCount,
      this.reverse,
      this.physics,
      this.scrollDirection,
      this.scrollController})

其中有一個(gè)必傳參數(shù)，controller（@required修飾的參數(shù)表示必傳的意思），該參數(shù)是RefreshController類型參數(shù)，可以通過該對(duì)象的一些方法主動(dòng)觸發(fā)下拉刷新，上拉加載，開啟二樓等主動(dòng)功能，

 //  請(qǐng)求頂部指示器刷新,觸發(fā)onRefresh
      void requestRefresh(
          {Duration duration: const Duration(milliseconds: 300),
          Curve curve: Curves.linear});
     // 請(qǐng)求底部指示器加載數(shù)據(jù),觸發(fā)onLoading
      void requestLoading(
          {Duration duration: const Duration(milliseconds: 300),
          Curve curve: Curves.linear}) ;
      //  主動(dòng)打開二樓
      void requestTwoLevel(
                {Duration duration: const Duration(milliseconds: 300),
                Curve curve: Curves.linear});

      // 頂部指示器刷新成功,是否要還原底部沒有更多數(shù)據(jù)狀態(tài)
      void refreshCompleted({bool resetFooterState:false});
      // 不顯示任何狀態(tài),直接變成idle狀態(tài)隱藏掉
      void refreshToIdle();
      // 頂部指示器刷新失敗
      void refreshFailed();
      // 關(guān)閉二樓
      void twoLevelComplete(
       {Duration duration: const Duration(milliseconds: 500),
       Curve curve: Curves.linear};
      // 底部指示器加載完成
      void loadComplete();
      // 底部指示器進(jìn)入一個(gè)沒有更多數(shù)據(jù)的狀態(tài)
      void loadNoData();
      // 底部加載失敗
      void loadFailed()
      // 刷新底部指示器狀態(tài)為idle
      void resetNoData();

更多功能可以參考pull_to_refresh主頁，這是目前dart中功能最全的刷新加載更多組件拉。

3、在StatefulWidget中嵌套一個(gè)列表組件，在flutter中官方給我們提供了一個(gè)可以用來加載列表數(shù)據(jù)的一個(gè)組件ListView，和Android中的ListView控件名稱一樣，很容易理解。
但是一般情況下我們會(huì)用ListView.builder的來構(gòu)建一個(gè)列表組件，因?yàn)橹苯邮褂肔istView構(gòu)建的時(shí)候，不管有多少條數(shù)據(jù)都會(huì)一次性加載出來，但是ListView.builder構(gòu)建的話，有一個(gè)延時(shí)加載策略，值加載當(dāng)前屏幕顯示的數(shù)據(jù)，相對(duì)而言其性能會(huì)更好寫。所以當(dāng)數(shù)據(jù)比較多的時(shí)候，推薦用ListView.builder構(gòu)建來構(gòu)建列表組件。

 @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)));
  }

這里要注意一個(gè)問題，之前我一位ListView如果想要填充滿整個(gè)屏幕的話是需要設(shè)置高度充滿的，所以我就自作聰明的在ListView的外面嵌套來一個(gè)Expanded 來填充布局鋪滿屏幕，結(jié)果弄來半天，都不能手動(dòng)下拉刷新和加載更多，最后，分析發(fā)現(xiàn)是填充的問題，結(jié)果去掉之后就ok了，并且ListView和Android 中一樣都是可以根據(jù)item的個(gè)數(shù)自動(dòng)適應(yīng)是否鋪滿全屏，所以外面不需要再嵌套其他的約束組件來。