前言
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 列表嵌入以及視圖浮動兩種形式
傳送門
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相關的問題都可以進行討論。正如它的名字一樣,有問必答,只要群主有時間,都會幫大家一起解決問題。