Flutter 給列表增加下拉刷新和上滑加載更多功能

更新時間：2021年05月27日 09:20:43 作者：島上碼農

在實際的 App 中，下拉刷新和上滑加載更多是非常常見的交互形式。在 Flutter 中，有 flutter_easyrefresh開源插件用于實現(xiàn)下拉刷新和上滑加載更多。本篇介紹了有狀態(tài)組件和 flutter_easyrefresh 的基本應用，同時使用模擬的方式完成了異步數(shù)據(jù)加載。

有狀態(tài)組件

當 Flutter 的頁面需要動態(tài)更新數(shù)據(jù)的時候，就會涉及到 UI 組件需要根據(jù)數(shù)據(jù)變化更新，此時也就意味著組件有了“狀態(tài)”。這就類似 React 的類組件和函數(shù)組件（只是后續(xù) React 使用了勾子函數(shù)實現(xiàn)了函數(shù)組件也可以有狀態(tài)）。在 Flutter 中，組件也分為無狀態(tài)組件（StatelessWidget）和有狀態(tài)組件（StatefulWidget），一般盡量使用無狀態(tài)組件。但是如果組件本身需要維護自身狀態(tài)的時候，就需要使用有狀態(tài)組件了。有狀態(tài)組件的定義形式如下：

//有狀態(tài)組件聲明
class DynamicPage extends StatefulWidget {
  DynamicPage({Key key}) : super(key: key);

  //創(chuàng)建組件狀態(tài)
  @override
  _DynamicPageState createState() => _DynamicPageState();
}

//組件狀態(tài)
class _DynamicPageState extends State<DynamicPage> {
  @override
  Widget build(BuildContext context) {
    //UI 構建
  }
}

有狀態(tài)組件實際的業(yè)務邏輯均由對應的狀態(tài)實現(xiàn)，包括數(shù)據(jù)定義和 UI 構建。其核心在于有一個 setState 方法用于通知界面刷新（這點也和 React 類似），一旦主動調用了 setState 方法，界面就會進行刷新。當然，其中還有一些別的與狀態(tài)相關的方法，如狀態(tài)初始化方法 initialState。

異步 async/await

在網絡請求中，不可避免需要用到異步請求，這個時候就需要使用到 async 和 await。標記為 async 的函數(shù)返回結果是一個 Future 包裹的對象，調用方可以使用 await 從中獲取實際返回的數(shù)據(jù)。async/await 這個配對就完成了一個異步調用過程。在結果沒有返回的時候，主線程會執(zhí)行其他任務。在這里我們將列表數(shù)據(jù)獲取的方法改為 async 方式，以模擬網絡請求，如下所示：

static Future<List<Map<String, Object>>> list(int page, int size) async {
    return List<Map<String, Object>>.generate(size, (index) {
      return {
        'title': '標題${index + (page - 1) * size + 1}：這是一個列表標題，最多兩行，多處部分將會被截取',
        'imageUrl':
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3331308357,177638268&fm=26&gp=0.jpg',
        'viewCount': 180,
      };
    });
  }

調用的時候，使用 await即可獲取實際結果數(shù)據(jù)，如下所示：

// _currentPage 為當前頁碼，PAGE_SIZE為分頁大小
List<Map<String, Object>> _newItems =
        await DynamicMockData.list(_currentPage, PAGE_SIZE);

引入 flutter_easyrefresh

flutter 需要引入第三方插件時，需要在 pubspec.yaml 文件下的dependencies節(jié)點下增加依賴，撰寫本文時flutter_easyrefresh的最新版為2.2.1，因此指定版本如下：

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  flutter_easyrefresh: ^2.2.1

添加完依賴后，需要在項目目錄執(zhí)行 flutter pub get 命令更新依賴（VSCode 在檢測到 pubspec.yaml變化時會自動拉?。?。

使用 flutter_easyrefresh

對//www.dhdzp.com/article/213052.htm 上一篇的列表進行改造分為如下三個步驟：

將頁面修改為有狀態(tài)組件，方便支持管理數(shù)據(jù)和根據(jù)數(shù)據(jù)更新界面
使用 EasyRefresh 包裹列表組件，并指定 onRefresh 和 onLoad 回調方法，以響應下拉刷新和上滑加載更多的動作。
根據(jù)當前分頁獲取數(shù)據(jù)，并更新到列表數(shù)據(jù)中，再調用 setState 更新狀態(tài)數(shù)據(jù)刷新界面。

整個新的 dynamic_page 的代碼如下所示：

import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'dynamic_item.dart';
import 'dynamic_mock_data.dart';

class DynamicPage extends StatefulWidget {
  DynamicPage({Key key}) : super(key: key);

  @override
  _DynamicPageState createState() => _DynamicPageState();
}

class _DynamicPageState extends State<DynamicPage> {
  List<Map<String, Object>> _listItems = [];
  int _currentPage = 1;
  static const int PAGE_SIZE = 20;

  void _refresh() async {
    _currentPage = 1;
    _requestNewItems();
  }

  void _load() async {
    _currentPage += 1;
    _requestNewItems();
  }

  void _requestNewItems() async {
    List<Map<String, Object>> _newItems =
        await DynamicMockData.list(_currentPage, PAGE_SIZE);
    this.setState(() {
      if (_currentPage > 1) {
        _listItems += _newItems;
      } else {
        _listItems = _newItems;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: EasyRefresh(
        onRefresh: () async {
          _refresh();
        },
        onLoad: () async {
          _load();
        },
        child: ListView.builder(
            itemCount: _listItems.length,
            itemBuilder: (context, index) {
              return DynamicItem(
                _listItems[index]['title'],
                _listItems[index]['imageUrl'],
                _listItems[index]['viewCount'],
              );
            }),
      ),
    );
  }
}

運行結果

運行結果如下圖所示，由于上拉加載過快沒法直接截圖看到。需要注意的是，首次加載的時候，EasyRefresh 并不會自動加載，這個時候需要使用 EasyRefreshController 來控制，有興趣的同學可以參考 flutter_easyfresh 的文檔實現(xiàn)。

結語

flutter_easyrefresh 可以實現(xiàn)豐富的加載效果，包括自定義加載組件，乃至使用有趣的動畫等等，基本上可以滿足各類下拉刷新或上滑加載更多的需要。建議可以參考文檔多嘗試其他效果，有興趣的也可以閱讀源碼看看具體的實現(xiàn)方式。

以上就是Flutter 給列表增加下拉刷新和上滑加載更多功能的詳細內容，更多關于Flutter 下拉刷新和上滑加載的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

Android實現(xiàn)3D標簽云簡單效果
這篇文章主要為大家詳細介紹了Android實現(xiàn)3D標簽云簡單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-05-05
Android實現(xiàn)偵聽電池狀態(tài)顯示、電量及充電動態(tài)顯示的方法
這篇文章主要介紹了Android實現(xiàn)偵聽電池狀態(tài)顯示、電量及充電動態(tài)顯示的方法,非常實用的功能,需要的朋友可以參考下
2014-09-09
Android中OptionMenu用法實例
這篇文章主要介紹了Android中OptionMenu用法,實例分析了Android中OptionMenu創(chuàng)建操作的相關實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
Android Http協(xié)議訪問網絡實例（3種）
本篇文章主要介紹了Android Http協(xié)議訪問網絡實例（3種），具有一定的參考價值，有興趣的可以了解一下
2017-07-07
Android學習之菜單的使用方法
這篇文章主要為大家詳細介紹了Android學習之菜單的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-09-09
利用Jetpack Compose實現(xiàn)主題切換功能
這篇文章主要介紹了如何利用Android中的Jetpack Compose實現(xiàn)主題切換功能，文中的示例代碼講解詳細，對我們學習有一定幫助，需要的可以參考一下
2022-01-01
關于Android Studio安裝完后activity_main.xml前幾行報錯的解決建議
這篇文章主要介紹了關于Android Studio安裝完后activity_main.xml前幾行報錯的解決建議，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-03-03
Flutter?GetX使用實例詳細解讀
這篇文章主要為大家介紹了Flutter?GetX使用示例詳細解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
Android?hid發(fā)送apdu格式數(shù)據(jù)示例詳解
這篇文章主要介紹了Android?hid發(fā)送apdu格式數(shù)據(jù),在?Android?中，如果你想通過?HID（Human?Interface?Device）發(fā)送?APDU?格式的數(shù)據(jù)，通常會涉及?USB?HID?設備或藍牙?HID?設備，本文給大家講解的非常詳細，需要的朋友可以參考下
2023-08-08
Android開發(fā)之基本控件和四種布局方式詳解
這篇文章主要介紹了Android開發(fā)之基本控件和四種布局方式詳解的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06