Flutter上拉加載下拉刷新---flutter_easyrefresh

前言

Flutter默認不支持上拉加載，下拉刷新也僅僅支持Material的一種樣式。Android開發使用過SmartRefreshLayout的小夥伴都知道這是一個強大的刷新UI庫，集成了不少出色的動畫效果，而且對自定義支持很是好。接下來給你們介紹的就是，Flutter版本的刷新UI庫---flutter_easyrefresh，在功能方面已經很接近Android的SmartRefreshLayout。

Github地址：flutter_easyrefresh

介紹

正如名字同樣，EasyRefresh很容易就能在Flutter應用上實現下拉刷新以及上拉加載操做，它支持幾乎全部的Flutter控件，但前提是須要包裹成ScrollView。它的功能與Android的SmartRefreshLayout很類似，一樣也吸收了不少三方庫的優勢。EasyRefresh中集成了多種風格的Header和Footer，可是它並無侷限性，你能夠很輕鬆的自定義。使用Flutter強大的動畫，甚至隨便一個簡單的控件也能夠完成。EasyRefresh的目標是爲Flutter打造一個強大，穩定，成熟的下拉刷新框架。

特色功能:

• 支持Andorid(光暈)，ios(越界回彈)效果
• 支持任意的ScrollView控件，若是不是進行簡單封裝便可(因此理論是全部控件)
• 支持自定義而且已經集成了不少炫酷的 Header 和 Footer
• 支持下拉刷新、上拉加載(可自動)
• 支持 Header 和 Footer 列表嵌入以及視圖浮動兩種形式

傳送門

• 屬性文檔
• 更新日誌
• 自定義Header和Footer

Demo

下載 APK-Demo

簡單用例

1.在 pubspec.yaml 中添加依賴

//pub方式
dependencies:
  flutter_easyrefresh: last_version

//導入方式
dependencies:
  flutter_easyrefresh:
    path: 項目路徑

2.在佈局文件中添加 EasyreFresh

import 'package:flutter_easyrefresh/easy_refresh.dart';
....
  GlobalKey<EasyRefreshState> _easyRefreshKey = new GlobalKey<EasyRefreshState>();
....
  new EasyRefresh(
    key: _easyRefreshKey,
    child: ScrollView(),
    onRefresh: () async{
      ....
    },
    loadMore: () async {
      ....
    },
  )

3.觸發刷新和加載動做

// 若是不須要能夠不用設置EasyRefresh的key
  _easyRefreshKey.currentState.callRefresh();
  _easyRefreshKey.currentState.callLoadMore();

使用指定的 Header 和 Footer

import 'package:flutter_easyrefresh/easy_refresh.dart';
....
  GlobalKey<RefreshHeaderState> _headerKey = new GlobalKey<RefreshHeaderState>();
  GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>();
....
  // 由於EasyRefresh會對Header和Footer進行更新，爲了與用戶保持統一的操做狀態，必須設置key
  // 不一樣的Header和Footer可能有不一樣的參數設置
  new EasyRefresh(
    refreshHeader: MaterialHeader(
        key: _headerKey,
    ),
    refreshFooter: MaterialFooter(
        key: _footerKey,
    ),
    child: ScrollView(),
    ....
  )

QQ討論羣 - 554981921

進羣須知

這個羣不單單是解決EasyreFresh的問題，任何Flutter相關的問題均可以進行討論。正如它的名字同樣，有問必答，只要羣主有時間，都會幫你們一塊兒解決問題。