Flutter封装加载状态视图，加载中、加载成功、加载失败、加载无数据

先看图，无图无真相~

具体实现如下：

创建load_state.dart

//四种视图状态
enum LoadState { State_Success, State_Error, State_Loading, State_Empty }///根据不同状态来展示不同的视图
class LoadStateLayout extends StatefulWidget {final LoadState state; //页面状态final Widget successWidget;//成功视图final VoidCallback errorRetry; //错误事件处理final VoidCallback emptyRetry; //空数据事件处理LoadStateLayout({Key key,this.state = LoadState.State_Loading,//默认为加载状态this.successWidget,this.errorRetry,this.emptyRetry}): super(key: key);@override_LoadStateLayoutState createState() => _LoadStateLayoutState();
}class _LoadStateLayoutState extends State<LoadStateLayout> {@overrideWidget build(BuildContext context) {return Container(//宽高都充满屏幕剩余空间width: double.infinity,height: double.infinity,child: _buildWidget,);}///根据不同状态来显示不同的视图Widget get _buildWidget {switch (widget.state) {case LoadState.State_Success:return widget.successWidget;break;case LoadState.State_Error:return _errorView;break;case LoadState.State_Loading:return _loadingView;break;case LoadState.State_Empty:return NoDataView(widget.emptyRetry);break;default:return null;}}///加载中视图Widget get _loadingView {return Container(width: double.infinity,height: double.infinity,alignment: Alignment.center,color: Colors.white,child: Container(height: 200,padding: EdgeInsets.all(10),child: Column(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[Container(width: 150,height: 150,child: Image.asset('images/cargo_loading.gif'),),Text('拼命加载中...',style: TextStyle(color: ColorConfig.COLOR_153,fontSize: ScreenUtil().setSp(24)),)],),),);}///错误视图Widget get _errorView {return Container(width: double.infinity,height: double.infinity,color: Colors.white,child: InkWell(onTap: widget.errorRetry,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Container(width: ScreenUtil().setWidth(405),height: ScreenUtil().setHeight(317),child: Image.asset('images/load_error.png'),),Text("加载失败，请轻触重试!",style: TextStyle(color: ColorConfig.COLOR_153,fontSize: ScreenUtil().setSp(24)),),],),));}
}

no_data.dart

class NoDataView extends StatefulWidget {final VoidCallback emptyRetry; //无数据事件处理NoDataView(this.emptyRetry);@override_NoDataViewState createState() => _NoDataViewState();
}class _NoDataViewState extends State<NoDataView> {@overrideWidget build(BuildContext context) {return Container(color: Colors.white,width: ScreenUtil().setWidth(750),height: double.infinity,child: InkWell(onTap: widget.emptyRetry,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Container(width: ScreenUtil().setWidth(405),height: ScreenUtil().setHeight(281),child: Image.asset('images/no_data.png'),),Text('暂无相关数据,轻触重试~',style: TextStyle(color: ColorConfig.COLOR_153,fontSize: ScreenUtil().setSp(24)),)],),));}
}

至此，封装完毕！！！
下面开始使用：

//页面加载状态，默认为加载中
LoadState _layoutState = LoadState.State_Loading;
Widget _listView(BuildContext context){return LoadStateLayout(state: _layoutState,emptyRetry: (){setState(() {_layoutState = LoadState.State_Loading;});_getOrderList();},errorRetry: () {setState(() {_layoutState = LoadState.State_Loading;});_getOrderList();}, //错误按钮点击过后进行重新加载successWidget: Center(child: EasyRefresh(child: ListView.builder(//controller: scrollController,itemBuilder: (context, index) {return _item(orderList, index);},itemCount: orderList.length,),//firstRefresh: true,controller: _controller,header: ClassicalHeader(refreshText: '下拉刷新',refreshReadyText: '释放刷新',refreshingText: '正在刷新...',refreshedText: '刷新完成',refreshFailedText: '刷新失败',noMoreText: '没有更多',infoText: '更新于 %T',),footer: ClassicalFooter(loadedText: '加载完成',loadReadyText: '释放加载',loadingText: '正在加载...',loadFailedText: '加载失败',noMoreText: '没有更多',infoText: '更新于 %T'),onRefresh: () async{_getOrderList();},onLoad: orderList.length==10? () async{_getMoreList();}:null,)),);}

Flutter封装加载状态视图，加载中、加载成功、加载失败、加载无数据相关推荐

modprobe:用于向内核中加载模块或者从内核中移除模块。
modprobe:用于向内核中加载模块或者从内核中移除模块. modprobe br_netfilter 加载模块 modprobe -r br_netfilter 移除 1.查看系统中所有modul ...
vue 如何处理两个组件异步问题_Vue异步组件处理路由组件加载状态的解决方案...
vue.js 组件组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般 ...
在ASP.NET MVC中加载部分视图的方法及差别
在视图里有多种方法可以加载部分视图,包括Partial() .Action().RenderPartial().RenderAction().RenderPage()方法.下面说明一下这些方法的差别. ...
【清单】值得「等待」的12个指示加载状态的 js 库
以下优选 GitHub 上高 star 的指示加载状态的 JavaScript 库.另外这里还有10个有意思的 JavaScript 实战小项目供大家学习. 上期入口:一份数据分析学习清单.xls M ...
asp.net 动态创建TextBox控件如何加载状态信息
接着上文Asp.net TextBox的TextChanged事件你真的清楚吗? 这里我们来说说状态数据时如何加载的. 虽然在Control中有调用状态转存的方法,但是这里有一个判断条件 if (_c ...
文档加载状态_我们如何确定技术文档的状态？
文档加载状态 GitHub最近的一项调查中,超过90%的受访者表示,开源项目的主要问题之一是文档不完整或令人困惑. 我们该如何解决? GitHub用户认为文档质量差是#opensource项目的主要问 ...
vue页面按钮点击后，呈现loading加载状态
按钮点击时呈现加载状态,防止其他误操作. 1.效果图 2.代码实现 (1)按钮添加::loading="loading.listLoading",由这个属性控制加载状态动画 < ...
VS Code加载 Web 视图时出错
问题描述: VS Code加载 Web 视图时出错: Error: Could not register service workers: InvalidStateError: Failed to r ...
MVC学习七：Razor布局之加载分部视图【PartialView】
Partial View 顾名思义就是Html代码片段,应用于此HTML代码多次被页面加载时使用.(类似于WebForm程序中的用户控件) 注:PartialView和正常的View页面在访问时没有任 ...
Android实用视图动画及工具系列之三：表情加载动画和失败加载动画，人物加载动画
实现效果功能说明网速慢时,加载网络数据时,界面怎么处理才美观?载入失败或网络丢包时,如何让界面显得更和谐?这一直是开发人员和美工人员不绝于耳的问题,为了达到功能和UI的完美交互,我们不得不做一些基 ...

Flutter封装加载状态视图，加载中、加载成功、加载失败、加载无数据

先看图，无图无真相~

具体实现如下：

Flutter封装加载状态视图，加载中、加载成功、加载失败、加载无数据相关推荐

最新文章

热门文章