由于耦合度較高的問題
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)目就很清晰了镜盯,分工與工作量就都很好分配了(非列表頁面即將適配哈,以及返回頁面刷新的問題)