Flutter入門進階之旅（十五）ListView下拉重新整理&上拉載入更多

謝棟發表於2019-04-15
FlutterView

上期回顧

在上一篇博文中我們在介紹ListView跟GridView的時候，限於篇幅問題我們只講解了此二者的簡單的使用方法，關於一些在實際開發中更常用的細節問我們並沒有來得及跟大家展開講解，比如我們在使用長列表的時的下拉重新整理或者上拉載入更多的邏輯處理，今天的這篇文章我們就來著重分析一下在flutter中我們是如果實現長列表的下拉重新整理跟上拉載入更多操作的。

前言

現實開發中長列表佈局幾乎是所有APP的標配，幾乎你所使用的任何一款app都能找到長列表的身影，而長列表中必不可少的操作肯定是下拉重新整理、上拉載入更多。在原生Android中我們一般使用RecyclerView配合support.v4包下面的SwipeRefreshLayout來完成下拉重新整理動作，通過給RecyclerView繫結RecyclerView.OnScrollListener()拖動監聽事件來判斷列表的滑動狀態來決定是否進行載入更多的操作，有了原生Android開發的經驗，我們完全可以把這個思路同樣應用在Flutter中的長列表操作上。下面我們一起來看下Flutter中的下拉重新整理跟上拉載入更多吧。

1.下拉重新整理

Flutter跟Android作為Google的親兒子無論是在在風格命名還是設計思路上都有很大的相似跟想通性，上一篇博文中我們提到Flutter中使用ListViiew跟GridView來完成長列表佈局，跟原生Android命名都一樣，在Flutter中給我們提供的RefreshIndicator元件跟原生Android中的SwipeRefreshLayout設計思路一樣，都是為了簡化我們完成下拉重新整理的監聽動作。而且RefreshIndicator跟原生Android的SwipeRefreshLayout在外觀上幾乎也一樣，都遵循了google material design設計理念。

 /// Creates a refresh indicator.
  ///
  /// The [onRefresh], [child], and [notificationPredicate] arguments must be
  /// non-null. The default
  /// [displacement] is 40.0 logical pixels.
  ///
  /// The [semanticsLabel] is used to specify an accessibility label for this widget.
  /// If it is null, it will be defaulted to [MaterialLocalizations.refreshIndicatorSemanticLabel].
  /// An empty string may be passed to avoid having anything read by screen reading software.
  /// The [semanticsValue] may be used to specify progress on the widget. The
  const RefreshIndicator({
    Key key,
    @required this.child,
    this.displacement = 40.0, //圓環進度條展示居頂部的位置
    @required this.onRefresh, //重新整理回撥
    this.color,  //圓環進度條顏色
    this.backgroundColor, //背景顏色
    this.notificationPredicate = defaultScrollNotificationPredicate,
    this.semanticsLabel,
    this.semanticsValue,
  }) 
複製程式碼

在上面的構造方法中必要引數我都給了詳細的註釋說明，所以這裡我就不多展開講解了，先來看一張下拉重新整理的效果圖，稍後結合程式碼我再做具體講解。

效果圖

在這裡插入圖片描述

樣例程式碼

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: "ListView",
    debugShowCheckedModeBanner: false,
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyState();
}

class MyState extends State {
  List<ItemEntity> entityList = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 10; i++) {
      entityList.add(ItemEntity("Item  $i", Icons.accessibility));
    }
  }

  Future<Null> _handleRefresh() async {
    print('-------開始重新整理------------');
    await Future.delayed(Duration(seconds: 2), () {
      //模擬延時
      setState(() {
        entityList.clear();
        entityList = List.generate(
            10,
            (index) =>
                new ItemEntity("下拉重新整理後--item $index", Icons.accessibility));
        return null;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("ListView"),
        ),
        body: RefreshIndicator(
            displacement: 50,
            color: Colors.redAccent,
            backgroundColor: Colors.blue,
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return ItemView(entityList[index]);
              },
              itemCount: entityList.length,
            ),
            onRefresh: _handleRefresh));
  }
}

/**
 * 渲染Item的實體類
 */
class ItemEntity {
  String title;
  IconData iconData;

  ItemEntity(this.title, this.iconData);
}

/**
 * ListView builder生成的Item佈局，讀者可類比成原生Android的Adapter的角色
 */
class ItemView extends StatelessWidget {
  ItemEntity itemEntity;

  ItemView(this.itemEntity);

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Text(
              itemEntity.title,
              style: TextStyle(color: Colors.black87),
            ),
            Positioned(
                child: Icon(
                  itemEntity.iconData,
                  size: 30,
                  color: Colors.blue,
                ),
                left: 5)
          ],
        ));
  }
}
複製程式碼

上述程式碼我還是藉助上篇博文中講解ListView的例子，只不過ListView的外層用RefreshIndicator包裹了一下，並且給RefreshIndicator的onRefresh繫結了處理下拉重新整理事件的回撥函式。

Future<Null> _handleRefresh() async {
    print('-------開始重新整理------------');
    await Future.delayed(Duration(seconds: 2), () {
      //模擬延時
      setState(() {
        entityList.clear();
        entityList = List.generate(
            10,
            (index) =>
                new ItemEntity("下拉重新整理後--item $index", Icons.accessibility));
        return null;
      });
    });
  }
複製程式碼

在_handleRefresh（）中，我們通過Future.delayed模擬延時操作，在延時函式執行完畢之後，首先清空我們在initState中模擬的列表資料，然後重新生成重新整理後的資料，通過setState重新渲染ListView上繫結的資料來完成下拉刷下這一操作。

2.上拉載入更多

繼續完善下拉重新整理的程式碼，我們藉助ScrollController給ListView新增滑動監聽事件

     ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                if (index == entityList.length) {
                  return LoadMoreView();
                } else {
                  return ItemView(entityList[index]);
                }
              },
              itemCount: entityList.length + 1,
              controller: _scrollController,
            ),
            onRefresh: _handleRefresh));
複製程式碼

然後通過_scrollController監聽手指上下拖動時在螢幕上產生的滾動距離來判斷是否觸發載入更多的操作

_scrollController.addListener(() {
      if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent) {
        print("------------載入更多-------------");
        _getMoreData();
      }
    });
複製程式碼

我們藉助ScrollController來判斷當前ListView可拖動的距離是否等於listview的最大可拖動距離，如果等於，那麼就會觸發載入更多的操作，然後我們去做相應的邏輯從而完成載入更多的操作。

其實現在講完Flutter中下拉重新整理跟載入更多的操作，你會發現在Flutter中處理這些操作跟開篇提到的原生Android的處理方式跟思想幾乎是一致的，我們來看下完成下拉重新整理跟載入更多後的完整效果圖。

效果圖

載入更多
先來看下整體程式碼，稍後我在結合程式碼講解一下這裡需要注意的一個小細節。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: "ListView",
    debugShowCheckedModeBanner: false,
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyState();
}

class MyState extends State {
  List<ItemEntity> entityList = [];
  ScrollController _scrollController = new ScrollController();
  bool isLoadData = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        print("------------載入更多-------------");
        _getMoreData();
      }
    });
    for (int i = 0; i < 10; i++) {
      entityList.add(ItemEntity("Item  $i", Icons.accessibility));
    }
  }

  Future<Null> _getMoreData() async {
    await Future.delayed(Duration(seconds: 2), () { //模擬延時操作
      if (!isLoadData) {
        isLoadData = true;
        setState(() {
          isLoadData = false;
          List<ItemEntity> newList = List.generate(5, (index) =>
          new ItemEntity(
              "上拉載入--item ${index + entityList.length}", Icons.accessibility));
          entityList.addAll(newList);
        });
      }
    });
  }

  Future<Null> _handleRefresh() async {
    print('-------開始重新整理------------');
    await Future.delayed(Duration(seconds: 2), () { //模擬延時
      setState(() {
        entityList.clear();
        entityList = List.generate(10,
                (index) =>
            new ItemEntity("下拉重新整理後--item $index", Icons.accessibility));
        return null;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("ListView"),
        ),
        body: RefreshIndicator(
            displacement: 50,
            color: Colors.redAccent,
            backgroundColor: Colors.blue,
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                if (index == entityList.length) {
                  return LoadMoreView();
                } else {
                  return ItemView(entityList[index]);
                }
              },
              itemCount: entityList.length + 1,
              controller: _scrollController,
            ),
            onRefresh: _handleRefresh));
  }
}

/**
 * 渲染Item的實體類
 */
class ItemEntity {
  String title;
  IconData iconData;

  ItemEntity(this.title, this.iconData);
}

/**
 * ListView builder生成的Item佈局，讀者可類比成原生Android的Adapter的角色
 */
class ItemView extends StatelessWidget {
  ItemEntity itemEntity;

  ItemView(this.itemEntity);

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Text(
              itemEntity.title,
              style: TextStyle(color: Colors.black87),
            ),
            Positioned(
                child: Icon(
                  itemEntity.iconData,
                  size: 30,
                  color: Colors.blue,
                ),
                left: 5)
          ],
        ));
  }
}

class LoadMoreView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(child: Padding(
      padding: const EdgeInsets.all(18.0),
      child: Center(
        child: Row(children: <Widget>[
          new CircularProgressIndicator(),
          Padding(padding: EdgeInsets.all(10)),
          Text('載入中...')
        ], mainAxisAlignment: MainAxisAlignment.center,),
      ),
    ), color: Colors.white70,);
  }

}
複製程式碼

上述程式碼中關於listView的itemBuilder的部分程式碼我做下簡單的解釋說明：

            ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                if (index == entityList.length) { //是否滑動到底部
                  return LoadMoreView();
                } else {
                  return ItemView(entityList[index]);
                }
              },
              itemCount: entityList.length + 1,
              controller: _scrollController,
            ),
            
複製程式碼

對比一開始下拉重新整理的程式碼，細心的讀者可能注意到，載入更多邏輯處理是在itemBuilder的時候多了一個邏輯判斷

 if (當前Item的角標==資料集合的長度) {  //滑動到最底部的時候
        顯示載入更多的佈局  LoadMoreView();
   }else{
       顯示正常的Item佈局  ItemView();
   }

複製程式碼

然後就是itemCount的數量自然也要加1，itemCount: entityList.length + 1加的這個1就是最底部的LoadMoreView的佈局。關於_scrollController所觸發的回撥函式我就不多做講解了，跟處理下拉重新整理時的邏輯程式碼一樣，讀者可結合上述完整程式碼自行對比理解。

好了，至此關於ListView的上拉載入更多跟下拉重新整理操作我就為大家講解完畢了，至於GridView的上下拉操作跟listView原理一樣，我就不在此過多廢話了，讀者可自行寫程式碼測試GridView的上下拉重新整理操作。

相關文章