Flutter 頁面下拉刷新和上拉加載

flutter_easyrefresh

正如名字一樣，EasyRefresh很容易就能在Flutter應用上實現下拉刷新以及上拉加載操作，它支持幾乎所有的Flutter控件。它的功能與Android的SmartRefreshLayout很相似，同樣也吸取了很多三方庫的優點。EasyRefresh中集成了多種風格的Header和Footer，但是它並沒有局限性，你可以很輕松的自定義。使用Flutter強大的動畫，甚至隨便一個簡單的控件也可以完成。EasyRefresh的目標是為Flutter打造一個強大，穩定，成熟的下拉刷新框架。github地址：https://github.com/xuelongqy/flutter_easyrefresh

特點功能:

• 支持Andorid(光暈)，ios(越界回彈)效果
• 支持絕大多數Widget
• 支持自定義並且已經集成了很多炫酷的 Header 和 Footer
• 支持下拉刷新、上拉加載(可自動)
• 支持 Header 和 Footer 列表嵌入以及視圖浮動兩種形式
• 支持列表事件監聽，制作任何樣子的 Header 和 Footer，並且能夠放在任何位置
• 支持首次刷新，並自定義視圖
• 支持自定義列表空視圖

這次就用easy_refresh插件，實現下拉刷新以及上拉加載功能。

1.在 pubspec.yaml 中添加依賴：

  flutter_easyrefresh: ^1.2.7

然后頁面引入：

import 'package:flutter_easyrefresh/easy_refresh.dart';

2.在布局文件中添加 EasyreFresh

// 方式一
  EasyRefresh(
    child: ScrollView(),
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )
  // 方式二
  EasyRefresh.custom(
    slivers: <Widget>[],
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )
  // 方式三
  EasyRefresh.builder(
    builder: (context, physics, header, footer) {
      return CustomScrollView(
        physics: physics,
        slivers: <Widget>[
          ...
          header,
          ...
          footer,
        ],
      );
    }
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )

3.觸發刷新和加載動作

EasyRefreshController _controller = EasyRefreshController();
  ....
  EasyRefresh(
    controller: _controller,
    ....
  );
  ....
  _controller.callRefresh();
  _controller.callLoad();

4.控制加載和刷新完成

 EasyRefreshController _controller = EasyRefreshController();
  ....
  EasyRefresh(
    enableControlFinishRefresh: true,
    enableControlFinishLoad: true,
    ....
  );
  ....
  _controller.finishRefresh(success: true);
  _controller.callLoad(success： true, noMore: false);

制作上拉加載效果示例

https://www.cnblogs.com/joe235/p/11557772.html