前言
如何開發(fā)一款易用的，并且可以擴展的空頁面呢？那么今天我將帶領(lǐng)大家手把手開發(fā)一款可擴展的空頁面。
開發(fā)前注意事項
1、定義好空頁面狀態(tài)
2、可擴展思想（用抽象或基類替代實體）
3、抽離出空頁面的結(jié)構(gòu)
空頁面展示
在這里插入圖片描述
開始搭建
一、頁面分析
空頁面需要元素有：
- 展示圖片
- 展示文案
- 展示刷新按鈕
頁面功能點：
- 文案可自定義
- 圖片可自定義
- 按鈕可隱藏
wiget作用范圍:
- 可包裹其他widget
- 不包裹其他widget
二、定義狀態(tài)
2.1 幾種狀態(tài)
enum EmptyStatus {
fail, //失敗視圖
loading, //加載視圖
nodata, //沒有數(shù)據(jù)視圖
none //沒有狀態(tài)
}
沒有狀態(tài)該空頁面就隱藏掉
2.2 空頁面刷新回調(diào)
abstract class IEmptyRefresh{
void pressedReload();
}
2.3 定義copy類（復(fù)用做準(zhǔn)備）&定義空接口（抽離要擴展的方法）
abstract class Copyable<T> {
T copy();
}
abstract class IEmpty implements Copyable<IEmpty>{
IEmptyRefresh? iEmptyRefresh;
Widget? diyImage; // 自定義圖片替換
Widget? diyText;// 自定義文案替換
Widget? image();
Widget? text();
Widget? refresh();
}
2.4 空頁面實現(xiàn)類
默認加載中頁面
class DefaultLodingPage extends IEmpty{
@override
Widget? text() {
return diyText??Text(
LibEmptyManager.instance.libEmptyPageLoding,
style: TextStyle(fontSize: LibEmptyManager.instance.textSize, color: AppTheme.instance.textColor()),
);
}
@override
Widget? image() {
return null;
}
@override
Widget? refresh() => null;
@override
IEmpty copy() {
return DefaultLodingPage()
..diyImage = diyImage
..diyText = diyText
..iEmptyRefresh=iEmptyRefresh;
}
}
默認空頁面
class DefaultEmptyPage extends IEmpty{
@override
Widget? text() {
return diyText??Text(
LibEmptyManager.instance.libEmptyPageNoData,
style: TextStyle(fontSize: LibEmptyManager.instance.textSize, color: AppTheme.instance.textColor()),
);
}
@override
Widget? image() {
return Padding(
padding: const EdgeInsets.only(bottom: 20),
child: diyImage??Icon(LibEmptyManager.instance.imageNoData,color: AppTheme.instance.imageColor(),size: LibEmptyManager.instance.imageSize,),
);
}
@override
Widget? refresh() => null;
@override
IEmpty copy() {
return DefaultEmptyPage()
..diyImage = diyImage
..diyText = diyText
..iEmptyRefresh=iEmptyRefresh;;
}
}
默認網(wǎng)絡(luò)失效頁
class DefaultNetWorkError extends IEmpty {
@override
Widget? text() {
return diyText??Text(
LibEmptyManager.instance.libEmptyPageNetError,
style: TextStyle(fontSize: LibEmptyManager.instance.textSize, color: AppTheme.instance.textColor()),
);
}
@override
Widget? image() {
return Padding(
padding: const EdgeInsets.only(bottom: 20),
child: diyImage??Icon(LibEmptyManager.instance.imageNetWork,color: AppTheme.instance.imageColor(),size: LibEmptyManager.instance.imageSize,),
);
}
@override
Widget? refresh() {
return Padding(
padding: const EdgeInsets.only(top: 20),
child: Padding(
padding: const EdgeInsets.only(left: 20,right: 20),
child: ElevatedButton(onPressed: () => iEmptyRefresh?.pressedReload(),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(AppTheme.instance.btnBackColor()),
shape: MaterialStateProperty.all(const StadiumBorder()),
)
, child: Text(LibEmptyManager.instance.libRefresh,style: TextStyle(fontSize: LibEmptyManager.instance.libRefreshSize,color: AppTheme.instance.btnTextColor())),),
),
);
}
@override
IEmpty copy() {
return DefaultNetWorkError()
..diyImage = diyImage
..diyText = diyText
..iEmptyRefresh=iEmptyRefresh;;
}
}
2.5 空頁面管理類
可進行外部配置
class LibEmptyManager{
IEmpty emptyPage = DefaultEmptyPage();
IEmpty loadingPage = DefaultLodingPage();
IEmpty netWorkError = DefaultNetWorkError();
late LibEmptyConfig libEmptyConfig;
LibEmptyManager._();
static final LibEmptyManager _instance = LibEmptyManager._();
static LibEmptyManager get instance {
return _instance;
}
2.6 核心邏輯
判斷狀態(tài)，并進行類型拷貝，并增加自定義參數(shù)
switch(widget.layoutType){
case EmptyStatus.none:
visable = true;
break;
// return widget.child;
case EmptyStatus.fail:
iEmpty = LibEmptyManager.instance.netWorkError.copy()
..diyText = widget.networkText
..diyImage = widget.networkImage
;
break;
case EmptyStatus.nodata:
iEmpty = LibEmptyManager.instance.emptyPage.copy()
..diyText = widget.emptyText
..diyImage = widget.emptyImage
;
break;
case EmptyStatus.loading:
iEmpty = LibEmptyManager.instance.loadingPage;
break;
default:
iEmpty = LibEmptyManager.instance.emptyPage.copy()
..diyText = widget.emptyText
..diyImage = widget.emptyImage
;
}
如果是包裹類型需要stack進行包裝
return Stack(
children: [
Offstage(
offstage: !visable,
child: widget.child,
),
Offstage(
offstage: visable,
child: Container(
width: double.infinity,
color: AppTheme.instance.backgroundColor(),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: _listEmpty(iEmpty),
),
),),
],
);
判斷是否有網(wǎng)，有網(wǎng)的話，就刷新，沒網(wǎng)的話，就提示
@override
void pressedReload() async{
bool isConnectNetWork = await isConnected();
if(isConnectNetWork){
widget.refresh.call();
}else{
TipToast.instance.tip(LibLocalizations.getLibString().libNetWorkNoConnect!,tipType: TipType.error);
}
}
// 是否有網(wǎng)
Future<bool> isConnected() async {
var connectivityResult = await (Connectivity().checkConnectivity());
return connectivityResult != ConnectivityResult.none;
}
組裝empty
List<Widget> _listEmpty(IEmpty? iEmpty) {
List<Widget> tempEmpty = [];
if(iEmpty!=null){
Widget? image = iEmpty.image();
Widget? text = iEmpty.text();
Widget? refresh = iEmpty.refresh();
if(image!=null){
tempEmpty.add(image);
}
if(text!=null){
tempEmpty.add(text);
}
if(refresh!=null){
tempEmpty.add(refresh);
}
}
return tempEmpty;
}
三、空頁面widget實現(xiàn)完整代碼
class LibEmptyView extends StatefulWidget{
Widget? child;
EmptyStatus layoutType;
VoidCallback refresh;
Widget? networkImage;Widget? networkText;
Widget? emptyImage;Widget? emptyText;
LibEmptyView({Key? key, this.child,required this.refresh,required this.layoutType,this.networkImage,this.networkText, this.emptyImage,this.emptyText}) : super(key: key);
@override
State<StatefulWidget> createState() => _LibEmptyViewState();
}
class _LibEmptyViewState extends State<LibEmptyView> implements IEmptyRefresh{
//控制器
@override
Widget build(BuildContext context) {
IEmpty? iEmpty;
bool visable = false;
switch(widget.layoutType){
case EmptyStatus.none:
visable = true;
break;
case EmptyStatus.fail:
iEmpty = LibEmptyManager.instance.netWorkError.copy()
..diyText = widget.networkText
..diyImage = widget.networkImage
;
break;
case EmptyStatus.nodata:
iEmpty = LibEmptyManager.instance.emptyPage.copy()
..diyText = widget.emptyText
..diyImage = widget.emptyImage
;
break;
case EmptyStatus.loading:
iEmpty = LibEmptyManager.instance.loadingPage;
break;
default:
iEmpty = LibEmptyManager.instance.emptyPage.copy()
..diyText = widget.emptyText
..diyImage = widget.emptyImage
;
}
iEmpty?.iEmptyRefresh = this;
return Stack(
children: [
Offstage(
offstage: !visable,
child: widget.child,
),
Offstage(
offstage: visable,
child: Container(
width: double.infinity,
color: AppTheme.instance.backgroundColor(),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: _listEmpty(iEmpty),
),
),),
],
);
}
@override
void pressedReload() async{
bool isConnectNetWork = await isConnected();
if(isConnectNetWork){
widget.refresh.call();
}else{
TipToast.instance.tip(LibLocalizations.getLibString().libNetWorkNoConnect!,tipType: TipType.error);
}
}
// 是否有網(wǎng)
Future<bool> isConnected() async {
var connectivityResult = await (Connectivity().checkConnectivity());
return connectivityResult != ConnectivityResult.none;
}
}
List<Widget> _listEmpty(IEmpty? iEmpty) {
List<Widget> tempEmpty = [];
if(iEmpty!=null){
Widget? image = iEmpty.image();
Widget? text = iEmpty.text();
Widget? refresh = iEmpty.refresh();
if(image!=null){
tempEmpty.add(image);
}
if(text!=null){
tempEmpty.add(text);
}
if(refresh!=null){
tempEmpty.add(refresh);
}
}
return tempEmpty;
}
四、空頁面widget使用代碼
包裹使用 （代碼中的webview封裝參見：跟我學(xué)企業(yè)級flutter項目：如何封裝一套易用，可擴展的Hybrid混合開發(fā)webview）
LibEmptyView(
layoutType: status,
refresh: () {
status = EmptyStatus.none;
_innerWebPageController.reload();
},
child: InnerWebPage(widget.url,titleCallBack: (title){
setState(() {
urlTitle = title;
});
},javascriptChannels: widget._javascriptChannels,urlIntercept: widget._urlIntercept,onInnerWebPageCreated: (innerWebPageController){
_innerWebPageController = innerWebPageController;
widget._javascriptChannels?.webPageCallBack = webPageCallBack;
widget._urlIntercept?.webPageCallBack = webPageCallBack;
},onWebResourceError: (error){
setState(() {
status = EmptyStatus.fail;
});
},),
),
));
非包裹使用
if(_status == EmptyStatus.none){
return _listViewUi.call(_allReportItems);
}else{
var empty = LibEmptyView(
layoutType: _status,
refresh: () {
_status = EmptyStatus.loading;
LibLoading.show();
_refreshCenter.refreshData();
},networkImage: networkImage,networkText: networkText,emptyImage: emptyImage,emptyText: emptyText,);
if(builder!=null){
return builder.call(context,empty);
}else{
return empty;
}
}
感謝大家閱讀我的文章
