使用flutter_allroundrefresh進(jìn)行下拉刷新、上拉加載拇囊、初始轉(zhuǎn)圈迂曲、錯(cuò)誤頁面、異常重試 一條龍功能

由于耦合度較高的問題flutter_allroundrefresh 已經(jīng)停止更新寥袭,請(qǐng)查看更優(yōu)秀的插件flutter_futrue
更多相關(guān)知識(shí)請(qǐng)查看:移動(dòng)開發(fā)知識(shí)體系總章(Java基礎(chǔ)路捧、Android、Flutter)

在使用Flutter 進(jìn)行demo調(diào)試纠永、項(xiàng)目研發(fā)的時(shí)候,你是否為下拉刷新組件發(fā)愁谒拴,你是否為初始轉(zhuǎn)圈尝江、空數(shù)據(jù)頁面發(fā)愁、網(wǎng)絡(luò)差或服務(wù)器超時(shí)的錯(cuò)誤頁面發(fā)愁英上,如果有炭序,請(qǐng)您了解一下這個(gè)物超所值的組件:flutter_allroundrefresh 啤覆。

flutter_allroundrefresh 特性

  • 頁面初始轉(zhuǎn)圈
  • 手機(jī)無網(wǎng)絡(luò)錯(cuò)誤頁面
  • 下拉刷新
  • 上拉加載更多
  • 網(wǎng)絡(luò)差或服務(wù)器超時(shí)錯(cuò)誤頁面
  • 無數(shù)據(jù)錯(cuò)誤頁面
  • 登錄失效處理
  • 錯(cuò)誤頁面重試機(jī)制
  • 定制轉(zhuǎn)圈
  • 定制錯(cuò)誤頁面
  • 定制/適配狀態(tài)碼
  • 支持國(guó)際化
  • 支持 android 、ios

即從打開頁面到展示數(shù)據(jù)或異常情況 的處理方案

廢話不多說:
Flutter Pub組件庫之 flutter_allroundrefresh 地址
Github之 flutter_allroundrefresh 地址 歡迎 start
效果圖&截圖(在文章底部惭聂,由于圖片較多較大窗声,需要先看效果的童鞋請(qǐng)滑到最后)

**使用 flutter_allroundrefresh **
1.添加依賴

dependencies:
  flutter_allroundrefresh: ^2.0.0

2.引入

import 'package:flutter_allroundrefresh/future_refresh.dart';

3.在入口方法中進(jìn)行初始化

AFutureWidget.init( );

3.1.在入口方法中進(jìn)行初始化(init方法中配置國(guó)際化)

AFutureWidget.init(  loadingText: '加載中...',...);

4.具體頁面的使用

class SimplePage3 extends StatefulWidget {
  @override
  _SimplePage3State createState() => _SimplePage3State();}

class _SimplePage3State extends State<SimplePage3> with TickerProviderStateMixin {
  var page = 1;
  List<SimpleDataBean> modelList = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( title: const Text('AFutureWidget 組件DEMO'),),
      body: AFutureWidget(
        childWidget: yourContentWidget(),//必填
        //errorWidget: YourError1Widget(),//支持自定義
        //progressWidget: YourProgress2Widget(),//支持自定義
        fRefresh: SimpleDao.getData10(page: 1),//必填,page 必須寫1
        fLoading: SimpleDao.getData10(page: page),//有加載更多必填
        onLoadingCallback: () {page = page + 1;setState(() {});},//有加載更多必填
        onRefreshCallback: () {page = 1;modelList.clear();setState(() {}); },//必填
        tokenInvalidCallback: () { },,//登錄失效回調(diào)
        dataCallback: (List<dynamic> data) {
          data.forEach((v) {
            modelList.add(new SimpleDataBean.fromJson(v));
          });
          setState(() {});
        },//必填
      ),
    );
  }
 Widget yourContentWidget() {
    return ListView.builder(
      itemCount: modelList.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          alignment: Alignment.center,
          height: 80.0,
          child: Text('${modelList[index].name}'),
        ); },);
  }
}

為了達(dá)到一目了然的效果辜纲,上面貼上了整個(gè)頁面的代碼笨觅,不難發(fā)現(xiàn)
1.該頁面只需要配置flutter_allroundrefresh 下的具體組件AFutureWidget 即可
2.具體頁面的ListView/GridView 的代碼,即Item樣式編寫

注意事項(xiàng)
1.獲取接口API數(shù)據(jù)的方法耕腾,即fRefresh的參數(shù)(方法)见剩,這里需要注意,無論是get/post/put/delete請(qǐng)求扫俺,具體方法的返回值必須是Future<dynamic>苍苞,詳情參考demo
2.errorWidget: YourError1Widget(),//支持自定義錯(cuò)誤頁面,demo/截圖展示了默認(rèn)純文字狼纬、靜態(tài)圖羹呵、和動(dòng)圖三種效果
3.progressWidget: YourProgress2Widget(),//支持自定義初始轉(zhuǎn)圈,demo/截圖展示了默認(rèn)轉(zhuǎn)圈疗琉、動(dòng)圖兩種效果
4.tokenInvalidCallback: 登錄失效的回調(diào)方法冈欢,根據(jù)項(xiàng)目決定是否需要(作者的項(xiàng)目是彈出對(duì)話框,點(diǎn)擊確定進(jìn)入登錄頁面)
5.接口API返回的json建議使用 json_to_dart 進(jìn)行格式化(有個(gè)小秘密在demo里没炒。涛癌。。)

5.接口API返回的json格式說明(若你的后臺(tái)有自己的code規(guī)則則需要在初始化方法AFutureWidget.init();中進(jìn)行適配)

{
    "code": "默認(rèn)200訪問成功送火,404無數(shù)據(jù)拳话,900登錄失效",
    "msg": "",
    "data": {},//  "data": [],
}

完成到這里,接入 flutter_allroundrefresh 組件的優(yōu)勢(shì)也就很清晰了
1.編寫/測(cè)試接口API數(shù)據(jù)獲取的方法(作者使用了java中的dao概念种吸,木有使用bloc)弃衍,
2.編寫具體頁面的Item
3.那么整體項(xiàng)目就包含:載框架搭建+dao層+UI層,不管是個(gè)人開發(fā),還是團(tuán)隊(duì)開發(fā)坚俗,項(xiàng)目就很清晰了镜盯,分工與工作量就都很好分配了(非列表頁面即將適配哈,以及返回頁面刷新的問題)

常見問題詳見文檔

有任何問題猖败、建議速缆、意見 ,歡迎到 github提issues

或者加入QQ群:10788108

all.gif

bottomBar.gif
def.gif

error1.gif
error2.gif

head1.gif
head2.gif

loading more.gif
no data.gif

relogin.gif
tabbar.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末恩闻,一起剝皮案震驚了整個(gè)濱河市艺糜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖破停,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件翅楼,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡真慢,警方通過查閱死者的電腦和手機(jī)毅臊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來黑界,“玉大人管嬉,你說我怎么就攤上這事≡耙” “怎么了宠蚂?”我有些...
    開封第一講書人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)童社。 經(jīng)常有香客問我求厕,道長(zhǎng),這世上最難降的妖魔是什么扰楼? 我笑而不...
    開封第一講書人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任呀癣,我火速辦了婚禮,結(jié)果婚禮上弦赖,老公的妹妹穿的比我還像新娘项栏。我一直安慰自己,他們只是感情好蹬竖,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開白布沼沈。 她就那樣靜靜地躺著,像睡著了一般币厕。 火紅的嫁衣襯著肌膚如雪列另。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評(píng)論 1 284
  • 那天旦装,我揣著相機(jī)與錄音页衙,去河邊找鬼。 笑死阴绢,一個(gè)胖子當(dāng)著我的面吹牛店乐,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播呻袭,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼眨八,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了左电?” 一聲冷哼從身側(cè)響起廉侧,我...
    開封第一講書人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤含长,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后伏穆,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡纷纫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年枕扫,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辱魁。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡烟瞧,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出染簇,到底是詐尸還是另有隱情参滴,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布锻弓,位于F島的核電站砾赔,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏青灼。R本人自食惡果不足惜暴心,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望杂拨。 院中可真熱鬧专普,春花似錦、人聲如沸弹沽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽策橘。三九已至炸渡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間役纹,已是汗流浹背偶摔。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留促脉,地道東北人辰斋。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像瘸味,于是被迫代替她去往敵國(guó)和親宫仗。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344