Flutter - 自定義插件 - 01 - zeking_refresh
目錄android
1. 快速使用
1. 依賴
2. 安裝
3. 引用
4. 簡單使用
2. ZekingRefreshController
3. ZekingRefresh
4. 先看下Example代碼結構 和 主頁面
5. Example 介紹
5.1 默認場景UI展現
5.1.1 效果圖
5.1.2 關鍵代碼
5.2 配置默認場景UI展現
5.2.1 效果圖
5.2.2 關鍵代碼
5.3 自定義場景UI展現
5.3.1 效果圖
5.3.2 關鍵代碼
5.4 設置 全局 場景UI展現
5.4.1 效果圖
5.4.2 關鍵代碼
5.5 默認場景下動態改變 提示語 和 吐司提示
5.5.1 效果圖
5.5.2 關鍵代碼
5.6 默認場景下動態改變 提示語 和 吐司提示
5.6.1 效果圖
5.6.2 關鍵代碼
5.7 自定義 吐司 樣式 爲 彈框提示
5.7.1 效果圖
5.7.2 關鍵代碼
5.8 和 CustomScrollView 使用
5.8.1 效果圖
5.8.2 關鍵代碼
5.9 和 NestedScrollView 使用
5.9.1 效果圖
5.9.2 關鍵代碼
複製代碼
pub地址： pub.dev/packages/ze…git
github地址：github.com/LZQL/zeking…github
一個支持刷新加載中，刷新失敗，刷新空數據，加載更多加載中，加載更多失敗，加載更多加載所有數據，業務loading的刷新組件bash
zeking_refresh暫時不支持自定義刷新頭部，如今用的是官方的RefreshIndicator,不過對它進行了修改onRefresh不在返回Future.微信
想看具體在項目中的應用？markdown
能夠查看框架
Flutter 練手項目 - WandroidBloc ： juejin.im/post/5d74b6…ide
1. 快速使用
1. 依賴
dependencies:
zeking_refresh: ^0.0.x 具體看pub
複製代碼
2. 安裝
flutter packages get
複製代碼
3. 引用
import 'package:zeking_refresh/zeking_refresh.dart';
複製代碼
4. 簡單使用
ZekingRefreshController _refreshController;
@override
void initState() {
_refreshController = ZekingRefreshController();
super.initState();
/// 首次進去 加載數據 ，會自動調用 onRefresh 方法
_refreshController.refreshingWithLoadingView();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: ZekingRefresh(
controller: _refreshController, // 必須參數
onRefresh: onRefresh,
onLoading: onLoading,
child: ListView.builder(
padding: EdgeInsets.all(0),
itemBuilder: (BuildContext context, int index) {
return ItemWidget(data[index], () {});
},
itemCount: data.length,
),
),
);
}
複製代碼
2. ZekingRefreshController
經過 ZekingRefreshController 的方法來進行不一樣場景的UI展現佈局
| 方法 | 說明 |
|---|---|
| refreshingWithLoadingView() | 刷新：打開一個新的頁面，首先有一個圈圈在中間轉，同時請求數據 widget |
| refreshFaild({String uiMsg, String toastMsg}) | 刷新：數據爲空 widget |
| refreshEmpty({String uiMsg, String toastMsg}) | 刷新：失敗 widget |
| refreshSuccess({String toastMsg}) | 刷新：成功，修改狀態，顯示結果 |
| loadMoreFailed({String uiMsg, String toastMsg}) | 加載更多：失敗 widget |
| loadMoreNoMore({String uiMsg, String toastMsg}) | 加載更多：已加載所有數據widget |
| loadMoreSuccess({String toastMsg}) | 加載更多：成功，修改狀態， |
| loading() | 業務加載中：loading widget （ 業務加載中：好比，上傳圖片，登陸，提交數據的loading widget ） |
| loadingEnd({String toastMsg}) | 業務加載中： 結束 loading widget 的展現 |
說明一下：在上面的方法中，有的方法有
uiMsg和toastMsg參數，是幹什麼的呢？post
uiMsg是用來動態修改 場景Ui上面的提示語的, 可是這個只對使用了框架默認的UI纔會起做用，如果自定義的widget，須要在外部本身去setState
toastMsg是用來談吐司提示的，默認已經實現了toast，固然你不知足於默認的吐司樣式， 能夠本身去定義，也能夠彈一個dialog，或者打印一個log，到時候傳一個方法給我就行了， 具體的看ZekingRefresh的toastMethod參數，下面
3. ZekingRefresh
這個就是咱們的刷新控件了，
ZekingRefresh({
@required this.controller,
@required this.onRefresh,
this.onLoading,
this.child,
this.displacement,
this.canLoadMore = true,
this.canRefresh = true,
this.scrollController,
this.physics,
this.useScrollController = true,
this.refreshLoadingWidget,
this.refreshLoadingImagePath,
this.refreshEmptyWidget,
this.refreshEmptyMessage,
this.refreshEmptyImagePath,
this.refreshEmptyImageWidth,
this.refreshEmptyImageHeight,
this.refreshEmptyCenterPadding,
this.refreshFailWidget,
this.refreshFailMessage,
this.refreshFailImagePath,
this.refreshFailImageWidth,
this.refreshFailImageHeight,
this.refreshFailCenterPadding,
this.loadLoadingWidget,
this.loadLoadingMessage,
this.loadFailWidget,
this.loadFailMessage,
this.loadNoMoreWidget,
this.loadNoMoreMessage,
this.loadingWidget,
this.toastMethod
});
複製代碼
| 參數 | 說明 |
|---|---|
| controller | 其實就是 ZekingRefreshController 用來控制不一樣場景的切換 |
| onRefresh | 刷新方法 |
| onLoading | 加載更多方法 |
| child | 其實最後都會轉爲CustomScrollview，因此寫特殊佈局的時候須要注意一下 |
| displacement | 下拉刷新圈圈的偏移量，默認是40 |
| canLoadMore | 是否支持加載更多，默認 true |
| canRefresh | 是否支持 下拉刷新，默認 true |
| useScrollController | 是否給默認的ScrollController ，默認 true |
| scrollController | 當useScrollController爲true，ScrollController也爲null的話，會new 一個 useScrollController |
| physics | ScrollPhysics |
| ======== | ====================== |
| refreshLoadingWidget | 自定義的 刷新 加載中 widget |
| refreshLoadingImagePath | 設置框架 默認 的 刷新 加載中 widget的圖片路徑，會自動旋轉 ，refreshLoadingWidget 和 refreshLoadingImagePath 都不設置的話，默認顯示一個CircularProgressIndicator |
| ======== | ====================== |
| refreshEmptyWidget | 自定義的 刷新 空數據 的 widget |
| refreshEmptyMessage | 設置框架 默認 刷新 空數據 widget 的 提示語 （ 默認爲 ： '暫無數據，請點擊屏幕重試' ） |
| refreshEmptyImagePath | 設置框架 默認 刷新 空數據 widget 的 圖片路徑，（圖片和提示語的位置是居中，圖片在上，提示語在下） |
| refreshEmptyImageWidth | 設置框架 默認 刷新 空數據 widget 的 圖片 寬度 ，（ 默認 136 ） |
| refreshEmptyImageHeight | 設置框架 默認 刷新 空數據 widget 的 圖片 高度 ， （ 默認 122 ） |
| refreshEmptyCenterPadding | 設置框架 默認 刷新 空數據 widget 的 圖片 和 提示語 的間隔，（ 默認 36 ） |
| ======== | ====================== |
| refreshFailWidget | 自定義的 刷新 失敗 widget |
| refreshFailMessage | 設置框架 默認 刷新 失敗 widget 的 提示語 （ 默認爲 ： '加載失敗，請點擊屏幕重試' ） |
| refreshFailImagePath | 設置框架 默認 刷新 失敗 widget 的 圖片路徑 ，（圖片和提示語的位置是居中，圖片在上，提示語在下） |
| refreshFailImageWidth | 設置框架 默認 刷新 失敗 widget 的 圖片 寬度 ，（ 默認 136 ） |
| refreshFailImageHeight | 設置框架 默認 刷新 失敗 widget 的 圖片 高度 ， （ 默認 122 ） |
| refreshFailCenterPadding | 設置框架 默認 刷新 失敗 widget 的 圖片 和 提示語 的間隔，（ 默認 36 ） |
| ======== | ====================== |
| loadLoadingWidget | 自定義的 加載更多 加載中 widget |
| loadLoadingMessage | 設置框架 默認 的 加載更多 加載中 widget的提示語（ 默認爲： '正在加載更多數據' ） |
| ======== | ====================== |
| loadFailWidget | 自定義的 加載更多 失敗 widget |
| loadFailMessage | 設置框架 默認 的 加載更多 失敗 widget的提示語（ 默認爲： '加載失敗，請點擊重試' ） |
| ======== | ====================== |
| loadNoMoreWidget | 自定義的 加載更多 已加載所有數據 widget |
| loadNoMoreMessage | 設置框架 默認 的 加載更多 已加載所有數據 widget的提示語（ 默認爲: '已加載所有數據' ） |
| ======== | ====================== |
| loadingWidget | 自定義的 業務加載中 widget （業務加載中：好比，上傳圖片，登陸，提交數據的loading widge） |
| ======== | ====================== |
| toastMethod | 自定義的 彈吐司方法， |
4. 先看下Example代碼結構 和 主頁面
|
|
|---|
5. Example 介紹
5.1 默認場景UI展現
代碼位置 example_page_01.dart
5.1.1 效果圖
5.1.2 關鍵代碼
5.2 配置默認場景UI展現
代碼位置 example_page_02.dart
5.2.1 效果圖
5.2.2 關鍵代碼
5.3 自定義場景UI展現
代碼位置 example_page_03.dart
5.3.1 效果圖
5.3.2 關鍵代碼
5.4 設置 全局 場景UI展現
代碼位置 example_page_04.dart ， my_refresh.dart
這個demo的效果圖和 5.2的效果圖是同樣的，只是把 配置 封裝成了 一個 MyRefresh 的Widget
5.4.1 效果圖
5.4.2 關鍵代碼
example_page_04.dart
my_refresh.dart
import 'package:zeking_refresh_example/common/index_all.dart';
import 'package:zeking_refresh/zeking_refresh.dart';
/// 自定義 配置全局 的 ZekingRefresh
class MyRefresh extends StatefulWidget {
final ZekingRefreshController controller;
final Function onRefresh; // 下拉刷新回調,
final Function onLoading; // 加載更多回調
final Widget child;
final double displacement;
final bool canLoadMore; // 是否支持加載更多操做,默認支持
final ScrollController scrollController;
final bool canRefresh; // 是否支持下拉刷新操做，默認支持
final ScrollPhysics physics;
final bool useScrollController; // 是否自動綁定scrollController
// 刷新 加載中 widget
final Widget refreshLoadingWidget;
final String refreshLoadingImagePath;
// 刷新 空數據 widget
final Widget refreshEmptyWidget;
final String refreshEmptyMessage;
final String refreshEmptyImagePath;
final double refreshEmptyImageWidth;
final double refreshEmptyImageHeight;
final double refreshEmptyCenterPadding;
// 刷新 失敗 widget
final Widget refreshFailWidget;
final String refreshFailMessage;
final String refreshFailImagePath;
final double refreshFailImageWidth;
final double refreshFailImageHeight;
final double refreshFailCenterPadding;
// 加載更多 加載中 widget
final Widget loadLoadingWidget;
final String loadLoadingMessage;
// 加載更多 失敗 widget
final Widget loadFailWidget;
final String loadFailMessage;
// 加載更多 已加載所有數據 widget
final Widget loadNoMoreWidget;
final String loadNoMoreMessage;
// 加載中 widget （通常用戶，事件的操做，好比 登陸，上傳數據，提交等操做場景）
final Widget loadingWidget;
final Function toastMethod; // 支持 自定義 吐司
MyRefresh({@required this.controller,
this.onRefresh,
this.onLoading,
this.child,
this.displacement,
this.canLoadMore = true,
this.canRefresh = true,
this.scrollController,
this.physics,
this.useScrollController = true,
this.refreshLoadingWidget,
this.refreshLoadingImagePath,
this.refreshEmptyWidget,
this.refreshEmptyMessage,
this.refreshEmptyImagePath,
this.refreshEmptyImageWidth,
this.refreshEmptyImageHeight,
this.refreshEmptyCenterPadding,
this.refreshFailWidget,
this.refreshFailMessage,
this.refreshFailImagePath,
this.refreshFailImageWidth,
this.refreshFailImageHeight,
this.refreshFailCenterPadding,
this.loadLoadingWidget,
this.loadLoadingMessage,
this.loadFailWidget,
this.loadFailMessage,
this.loadNoMoreWidget,
this.loadNoMoreMessage,
this.loadingWidget,
this.toastMethod});
@override
_MyRefreshState createState() => _MyRefreshState();
}
class _MyRefreshState extends State<MyRefresh> {
@override
Widget build(BuildContext context) {
return ZekingRefresh(
controller: widget.controller,
onRefresh: widget.onRefresh,
onLoading: widget.onLoading,
child: widget.child,
displacement: widget.displacement,
canLoadMore: widget.canLoadMore,
canRefresh: widget.canRefresh,
scrollController: widget.scrollController,
physics: widget.physics,
useScrollController: widget.useScrollController,
refreshLoadingWidget: widget.refreshLoadingWidget,
refreshLoadingImagePath: widget.refreshLoadingImagePath ?? 'images/common_loading.png',
refreshEmptyWidget: widget.refreshEmptyWidget,
refreshEmptyMessage: widget.refreshEmptyMessage ,
refreshEmptyImagePath: widget.refreshEmptyImagePath ?? 'images/empty.png',
refreshEmptyImageWidth: widget.refreshEmptyImageWidth,
refreshEmptyImageHeight: widget.refreshEmptyImageHeight ,
refreshEmptyCenterPadding: widget.refreshEmptyCenterPadding ,
refreshFailWidget: widget.refreshFailWidget,
refreshFailMessage: widget.refreshFailMessage ,
refreshFailImagePath: widget.refreshFailImagePath ?? 'images/failure.png',
refreshFailImageWidth: widget.refreshFailImageWidth,
refreshFailImageHeight: widget.refreshFailImageHeight,
refreshFailCenterPadding: widget.refreshFailCenterPadding,
loadLoadingWidget: widget.loadLoadingWidget,
loadLoadingMessage: widget.loadLoadingMessage ,
loadFailWidget: widget.loadFailWidget,
loadFailMessage: widget.loadFailMessage ,
loadNoMoreWidget: widget.loadNoMoreWidget,
loadNoMoreMessage: widget.loadNoMoreMessage ,
loadingWidget: widget.loadingWidget,
toastMethod: widget.toastMethod ,
);
}
}
複製代碼
5.5 默認場景下動態改變 提示語 和 吐司提示
代碼位置 example_page_05.dart
其實這種場景，每每是配合了 5.4 設置 全局 場景UI展現一塊兒使用的
5.5.1 效果圖
5.5.2 關鍵代碼
new PopupMenuButton<String>(
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
this.selectView('1. refreshingWithLoadingView', '1'),
this.selectView('2. refreshEmpty', '2'),
this.selectView('2.1 refreshEmpty 動態改變 提示語', '2.1'),
this.selectView('2.2 refreshEmpty 彈吐司', '2.2'),
this.selectView('3. refreshFaild', '3'),
this.selectView('3.1 refreshFaild 動態改變 提示語', '3.1'),
this.selectView('3.2 refreshFaild 彈吐司', '3.2'),
this.selectView('4. loading', '4'),
this.selectView('5. loadingEnd', '5'),
this.selectView('5.1 loadingEnd 彈吐司', '5.1'),
this.selectView('6. loadMoreFailed', '6'),
this.selectView('6.1 loadMoreFailed 動態改變 提示語', '6.1'),
this.selectView('6.2 loadMoreFailed 彈吐司', '6.2'),
this.selectView('7. loadMoreNoMore', '7'),
this.selectView('7.1 loadMoreNoMore 動態改變 提示語', '7.1'),
this.selectView('7.2 loadMoreNoMore 彈吐司', '7.2'),
],
onSelected: (String action) {
// 點擊選項的時候
switch (action) {
case '1':
_refreshController.refreshingWithLoadingView();
break;
case '2':
_refreshController.refreshEmpty();
break;
case '2.1':
_refreshController.refreshEmpty(uiMsg: '刷新 空數據 動態改變 -》 2.1');
break;
case '2.2':
_refreshController.refreshEmpty(toastMsg: '刷新空數據 2.2 ');
break;
case '3':
_refreshController.refreshFaild();
break;
case '3.1':
_refreshController.refreshFaild(uiMsg: '刷新 失敗 動態改變 -》 3.1');
break;
case '3.2':
_refreshController.refreshFaild(toastMsg: '刷新空數據 3.2 ');
break;
case '4':
_refreshController.loading();
break;
case '5':
_refreshController.loadingEnd();
break;
case '5.1':
_refreshController.loadingEnd(toastMsg: '請求數據結束 -》 5.1');
break;
case '6':
_refreshController.loadMoreFailed();
break;
case '6.1':
_refreshController.loadMoreFailed(uiMsg: '加載更多 失敗 -》 6.1');
break;
case '6.2':
_refreshController.loadMoreFailed(toastMsg: '加載更多 失敗 -》6.2');
break;
case '7':
_refreshController.loadMoreNoMore();
break;
case '7.1':
_refreshController.loadMoreNoMore(uiMsg: '加載更多 已加載所有數據 -》 7.1');
break;
case '7.2':
_refreshController.loadMoreNoMore(toastMsg: '加載更多 已加載所有數據 -》7.2');
break;
}
},
)
複製代碼
5.6 默認場景下動態改變 提示語 和 吐司提示
代碼位置 example_page_06.dart
這個場景其實和5.5同樣 都是要配合 5.4 設置 全局 場景UI展現 使用 纔有意義。
5.6.1 效果圖
5.6.2 關鍵代碼
這個demo我懶得寫了，大概的思路就是
自定義場景 下 動態改變 提示語 和 吐司提示
吐司提示 和 example_page_04 是同樣的
動態改變提示語 的話 ，由於你的 佈局是自定義的，
因此 你直接改變你傳入的 下面這些 widget 就能夠了。
refreshLoadingWidget: buildRefreshLoading(), /// 自定義 刷新 加載中 佈局
refreshFailWidget: buildRefreshFaild(), /// 自定義 刷新 失敗 佈局
refreshEmptyWidget: buildRefreshEmpty(), /// 自定義 刷新 空數據 佈局
loadLoadingWidget: buildLoadLoading(), /// 自定義 加載更多 加載中 佈局
loadFailWidget: buildLoadFaild(), /// 自定義 加載更多 失敗 佈局
loadNoMoreWidget: buildLoadNoMore(), /// 自定義 加載更多 已加載所有 佈局
loadingWidget:'), 複製代碼
5.7 自定義 吐司 樣式 爲 彈框提示
代碼位置 example_page_07.dart
5.7.1 效果圖
5.7.2 關鍵代碼
_refreshController.refreshEmpty(toastMsg: '11111');
複製代碼
5.8 和 CustomScrollView 使用
代碼位置 example_page_08.dart
5.8.1 效果圖
5.8.2 關鍵代碼
5.9 和 NestedScrollView 使用
代碼位置 example_page_09.dart ，tab_page.dart
5.9.1 效果圖
5.9.2 關鍵代碼
tab_page.dart
掃一掃，關注個人微信公衆號
都是一些我的學習筆記
點擊下面閱讀原文，用電腦看，有目錄，更舒服哦
相關文章
- 1. Flutter自定義組件-MultiShower
- 2. 自定義插件
- 3. Jquery自定義插件
- 4. Flutter: 自定義AppBar
- 5. Flutter 自定義Dialog
- 6. 自定義Gradle插件
- 7. Mybatis自定義插件
- 8. jQuery自定義插件
- 9. kindeditor自定義插件
- 10. Gradle 自定義插件
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • MySQL自定義函數（CREATE FUNCTION） - MySQL教程
- • RxJava操作符（十）自定義操作符
- • IntelliJ IDEA安裝代碼格式化插件
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Flutter自定義組件-MultiShower
- 2. 自定義插件
- 3. Jquery自定義插件
- 4. Flutter: 自定義AppBar
- 5. Flutter 自定義Dialog
- 6. 自定義Gradle插件
- 7. Mybatis自定義插件
- 8. jQuery自定義插件
- 9. kindeditor自定義插件
- 10. Gradle 自定義插件