Flutter 實現上拉加載更多、下拉刷新

參考：ListView下拉刷新與加載更多

文章目錄

• 相關文章推薦
• 實現效果
• 實現分析
  • 下拉刷新
  • 上拉加載更多
• 源碼

相關文章

Flutter 搭建具備 Drawer 和 BottomNavigationBar 的靜態項目框架

Flutter Widget 靜態佈局實戰

Flutter 容器類 Widget

Flutter 入門實現 ListView 列表頁面以及收藏頁面

Flutter 環境搭建以及填坑指南（Win10 系統且已有 Android 開發環境

實現效果截圖

實現分析

下拉刷新 下拉刷新使用的是 RefreshIndicator組件來實現，使用僞代碼以下：

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new RefreshIndicator(
          onRefresh: _handleRefresh,
        ));
  }
複製代碼

在body中添加RefreshIndicator 組件，在 onRefresh中實現下拉刷新的操做，這裏的_handleRefresh方法代碼以下：

Future  _handleRefresh() async {
    // 延遲3秒後添加新數據， 模擬網絡加載
    await Future.delayed(Duration(seconds: 3), () {
      setState(() {
        _suggestions.clear();
        _suggestions.addAll(generateWordPairs().take(20));
        return _suggestions;
      });
    });
  }
複製代碼

上拉加載更多 加載更多的組件在Flutter中是沒有提供的，因此咱們只能本身實現，在之前Android 中上拉加載更多能夠經過監聽滑動來實現，這裏應該也是能夠這麼操做的。

Flutter的ListView中有一個ScrollController屬性，經過監聽這個滑動來實現加載更多。

實現步驟以下：

• 定義ScrollController _scrollController = new ScrollController();
• 在 ListView 的列表中添加controller: _scrollController,

// listView 列表
  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemCount: _suggestions.length + 1,
      itemBuilder: (context, i) {
        // 在每一列以前，添加一個1像素高的分隔線widget
        if (i.isOdd) return new Divider();

        // 最後一個單詞對
        if (i == _suggestions.length) {
          return _buildLoadMore();
        } else {
          return _buildRow(_suggestions[i]);
        }
      },
      controller: _scrollController,
    );
複製代碼

• 在 initState()方法中監聽滑動，若是滑動到最後則獲取加載更多的數據

@override
  void initState() {
    super.initState();
    _suggestions.addAll(generateWordPairs().take(20));
    _scrollController.addListener(() {
      if (_scrollController.position.pixels == 
_scrollController.position.maxScrollExtent) {
        _getMoreData();
      }
    });
  }
複製代碼

_getMorData方法實現以下：

// 加載更多
  Future _getMoreData() async {
    await Future.delayed(Duration(seconds: 3), () {
      setState(() {
        // 這裏是本地數據，所以在無網的時候也會加載數據
        _suggestions.addAll(generateWordPairs().take(10));
        return _suggestions;
      });
    });
  }
複製代碼

至此，下拉刷新和上拉加載就實現完成了，歡迎你們一塊兒交流，共同進步。

源碼

若是對你有幫助，請幫忙點個star，謝謝~

若有錯誤歡迎指出，共同進步。 源碼地址：FlutterTest