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 列表嵌入以及視圖浮動兩種形式

傳送門

Demo

下載 APK-Demo

ApkDemo二維碼

簡單用例

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();
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相關的問題都可以進行討論。正如它的名字一樣,有問必答,只要群主有時間,都會幫大家一起解決問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM