Flutter 下拉刷新上拉加載更多

基礎頁面實現

TabBar + TabBarView 實現頁面切換聯動（相似Android tablayout + ViewPage）效果

• 直接上代碼

List <String>_titles=['湖人','勇士','雄鹿','快船','凱爾特人','馬刺','76人','猛龍'];
TabController  _tabController;
///省略部分代碼
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  ///省略部分代碼

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{

  @override
  void initState() {
    super.initState();
    //初始化控制器 
    _tabController = new TabController(length: _titles.length,vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.menu),
        title: buildTabBar(),
        //bottom: buildTabBar(),
      ),
      body: TabBarViewLayout()
    );
  }

  Widget buildTabBar() {
    return  TabBar(
          //構造Tab集合
          tabs: _titles.map((String title){
            return Tab(
              text: title,
            );
          }).toList(),
          ///省略部分代碼
          controller: _tabController,
        );
  }
}

// TabBarView Widget
class TabBarViewLayout extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    print("TabBarViewLayout build.......");
    return TabBarView(
      controller: _tabController,
      children: _titles.map((String title){
        return TabPageView(title);
      }).toList(),
    );
  }
}
複製代碼

• 若是代碼，能夠看到在AppBar這個widget的title屬性中加入TabBar，也就是AppBat的title模塊顯示TabBar，也可在AppBar的bottom屬性加入；還須要注意TabBar和TabBarView正是經過同一個controller來實現菜單切換和滑動狀態同步的，最終運行結果以下，分被設置tabbar在title 和bottom屬性

  

  

下拉刷新，上拉加載更多實現（RefreshIndicator）

• 下拉刷新 Flutter SDK中已經提供了一個RefreshIndicator控件，因此結合RefreshIndicator控件，讓其包裹ListView控件，結合滑動監聽ScrollController，而且設置頭部，尾部加載更多等界面，就能夠完成一個通用的下拉刷新，上拉加載更多的通用控件。首先來看看RefreshIndicator構造方法

const RefreshIndicator({
  Key key,
  @required this.child, //包裝一個可滾動widget
  this.displacement = 40.0,
  @required this.onRefresh, //觸發刷新調用方法
  this.color, //指示器顏色
  this.backgroundColor,
  this.notificationPredicate = defaultScrollNotificationPredicate,
  this.semanticsLabel,
  this.semanticsValue,
})
複製代碼

• RefreshIndicator包裝一個可滾動widget，這裏使用ListView

@override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      child: ListView.builder(
          ///保持ListView任何狀況都能滾動，解決在RefreshIndicator的兼容問題。
          physics: const AlwaysScrollableScrollPhysics(),
          itemBuilder: (context,index){
              return _getItem(index);
          },
          ///根據狀態返回繪製 item 數量
          itemCount: _getListCount(),
          ///滑動監聽
          controller: _scrollController,
      ),
      onRefresh: _handleRefresh,
      color: Theme.of(context).primaryColor, //指示器顏色
    );
  }
複製代碼

• ListView有兩個重要方法設置，一個是itemBuilder構建列表item的每個頁面，另外一個構建item頁面數量itemCount。首先看itemCount方法

///根據配置狀態返回實際列表數量
  _getListCount() {
    ///是否須要頭部
    if (widget.isHaveHeader) {
      return (items.length > 0) ? items.length + 2 : items.length + 1;
    } else {
      if (items.length == 0) {
        return 1;
      }
      return (items.length > 0) ? items.length + 1 : items.length;
    }
  }
複製代碼

• 該方法中，作了幾種內容類型判斷，若是須要頭部，用Item 0 的 Widget 做爲ListView的頭部，列表數量大於0時，由於頭部和底部加載更多選項，須要對列表數據總數+2，若是不須要頭部，在數據獲取爲零時，固定返回數量1用於空頁面呈現或者錯誤頁面；若是有數據，加上外部加載更多選項，須要對列表數據總數+1。接着看_getItem()方法，返回對應渲染頁面。

///根據配置狀態返回實際列表渲染Item
  _getItem(int index) {
    if (!widget.isHaveHeader && index == items.length && items.length != 0) {
      return _buildProgressIndicator();
    } else if (widget.isHaveHeader && index == _getListCount()-1 && items.length != 0) {
      return _buildProgressIndicator();
    } else if (widget.isHaveHeader && index == 0 && items.length != 0) {
      return widget.headerView();
    } else if (!widget.isHaveHeader && items.length == 0) {
      ///若是不須要頭部，而且數據爲0，渲染空頁面
      if(isLoading){
        return _buildIsLoading();
      }else{
        return _buildEmpty();
      }
    } else if(widget.isHaveHeader && items.length == 0){
      if(isLoading){
        return _buildIsLoading();
      }else{
        return _buildEmpty();
      }
    } else {
      return widget.renderItem(index, items[widget.isHaveHeader ? index-1 : index]);
    }
  }
複製代碼

• 該方法中，若是沒有設置頭部，而且數據不爲0，當index等於數據長度時，渲染加載更多頁面（由於index是從0開始）；若是設置了頭部頁面，而且數據不爲0，當index等於實際渲染長度 - 1時，渲染加載更多頁面（在該方法判斷是否已經加載到底）；接着若是設置了頭部widget，而且數據不爲0，當index = 0 ，渲染頭部widget；若是沒設置頭部，而且數據爲0，若是當前正在刷新，渲染Loading頁面，不然渲染空頁面或者Error頁面；同理，若是設置頭部，而且數據爲0，而且當前正在刷新，渲染Loading頁面，不然渲染空頁面或者Error頁面；若是不是上面狀況，則渲染正常渲染Item，若是這裏有須要，能夠直接返回相對位置的index，若是有頭部 index 減一 ，保持不會忽略 index = 0 的數據。

• 接着封裝一個統一網絡請求方法，外部請求安裝固定格式的 Map 將數據返回給下拉刷新上拉加載更多widget，達到通用的目的。

//網絡請求獲取數據 isRefresh 是否爲下拉刷新
  Future<List> makeHttpRequest(bool isRefresh) async {
    if (widget.requestApi is Function) {
      Map listObj = new Map<String, dynamic>();
      if(isRefresh){
        //下拉刷新
        listObj = await widget.requestApi({'pageIndex': 0});
      }else{
        //上拉加載更多
        listObj = await widget.requestApi({'pageIndex': _pageIndex});
      }
      _pageIndex = listObj['pageIndex'];
      _pageTotal = listObj['total'];
      return listObj['list'];
    } else {
      return Future.delayed(Duration(seconds: 2), () {
        return [];
      });
    }
  }
複製代碼

• 基礎東西寫好了，loading 加載動畫這裏直接就使用現成的輪子好了，推薦一個loading庫，flutter_spinkit
• 貼上loading加載代碼（更多實現細節請看文末demo地址代碼）

Widget _buildIsLoading() {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height*0.85,
      child: new Center(
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
                 Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                   children: <Widget>[
                     SpinKitCircle(size: 55.0, color: Theme.of(context).primaryColor),
                   ],
                 ),
                Padding(
                 child: Text("正在加載..",
                    style: TextStyle(color: Colors.black54, fontSize: 15.0)),
                padding: EdgeInsets.all(15.0),)
                ],)
    ));
  }
複製代碼

• 最後，經過構造方法設置設置須要加載的item值和是否支持下拉刷新和上來加載更多等，靈活配置控件

// 模塊item
  final renderItem;
  //數據獲取方法
  final requestApi;
  //頭部
  final headerView;
  //是否添加頭部 默認不添加
  final bool isHaveHeader;
  //是否支持下拉刷新 默承認如下拉刷新
  final bool isCanRefresh;
  //是否支持下拉加載更多 默承認以加載更多
  final bool isCanLoadMore;
  const RefreshPage({@required this.requestApi,
                     @required this.renderItem,
                     this.headerView,
                     this.isHaveHeader = false,
                     this.isCanRefresh = true,
                     this.isCanLoadMore = true })
                     : assert(requestApi is Function),
                       assert(renderItem is Function),
                      super();
複製代碼

最終demo 效果

Demo 地址

• github.com/maoqitian/f…

• Flutter完整開源項目： github.com/maoqitian/f…

About me

blog：

• 我的博客
• 掘金
• 簡書
• Github

mail：

• maoqitian@gmail.com
• maoqitian068@163.com