前言

跟我学flutter系列：
跟我学flutter：我们来举个例子通俗易懂讲解dart 中的 mixin
跟我学flutter：我们来举个例子通俗易懂讲解异步（一）ioslate
跟我学flutter：我们来举个例子通俗易懂讲解异步（二）ioslate循环机制
企业级篇目：
跟我学企业级flutter项目：用bloc手把手教你搭建用户认证系统
跟我学企业级flutter项目：dio网络框架增加公共请求参数&header
跟我学企业级flutter项目：如何用dio封装一套企业级可扩展高效的网络层
跟我学企业级flutter项目：如何封装一套易用，可扩展的Hybrid混合开发webview
跟我学企业级flutter项目：手把手教你制作一款低耦合空页面widget

如何开发一款易用的，并且可以扩展的空页面呢？那么今天我将带领大家手把手开发一款可扩展的空页面。

开发前注意事项

1、定义好空页面状态 2、可扩展思想（用抽象或基类替代实体） 3、抽离出空页面的结构

空页面展示

开始搭建

一、页面分析

空页面需要元素有：

1. 展示图片
2. 展示文案
3. 展示刷新按钮

页面功能点：

1. 文案可自定义
2. 图片可自定义
3. 按钮可隐藏

wiget作用范围:

1. 可包裹其他widget
2. 不包裹其他widget

二、定义状态

2.1 几种状态

enum EmptyStatus {

  fail, //失败视图

  loading, //加载视图

  nodata, //没有数据视图
none //没有状态

}

没有状态该空页面就隐藏掉

2.2 空页面刷新回调

abstract class IEmptyRefresh{

void pressedReload();


}

2.3 定义copy类（复用做准备）&定义空接口（抽离要扩展的方法）

abstract class Copyable {
T copy();

}

abstract class IEmpty implements Copyable{
IEmptyRefresh? iEmptyRefresh;
Widget? diyImage; // 自定义图片替换
Widget? diyText;// 自定义文案替换
Widget? image();

Widget? text();

Widget? refresh();

}

2.4 空页面实现类

默认加载中页面

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;;

  }



}

默认网络失效页

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 核心逻辑

判断状态，并进行类型拷贝，并增加自定义参数

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),

            ),

          ),),

      ],

    );

判断是否有网，有网的话，就刷新，没网的话，就提示

  @override
void pressedReload() async{
bool isConnectNetWork = await isConnected();
if(isConnectNetWork){

      widget.refresh.call();

    }else{

      TipToast.instance.tip(LibLocalizations.getLibString().libNetWorkNoConnect!,tipType: TipType.error);

    }

  }

// 是否有网
Future isConnected() async {
var connectivityResult = await (Connectivity().checkConnectivity());
return connectivityResult != ConnectivityResult.none;

  }

组装empty

List _listEmpty(IEmpty? iEmpty) {

  List 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实现完整代码

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 createState() => _LibEmptyViewState();


}

class _LibEmptyViewState extends State 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);

    }

  }


// 是否有网
Future isConnected() async {
var connectivityResult = await (Connectivity().checkConnectivity());
return connectivityResult != ConnectivityResult.none;

  }

}

List _listEmpty(IEmpty? iEmpty) {

  List 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封装参见：跟我学企业级flutter项目：如何封装一套易用，可扩展的Hybrid混合开发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;

      }

    }

感谢大家阅读我的文章