跟我学企业级flutter项目：手把手教你制作一款低耦合空页面widget

前言

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

开发前注意事项

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

空页面展示

在这里插入图片描述

开始搭建

一、页面分析

空页面需要元素有：

展示图片
展示文案
展示刷新按钮

页面功能点：

文案可自定义
图片可自定义
按钮可隐藏

wiget作用范围:

可包裹其他widget
不包裹其他widget

二、定义状态

2.1 几种状态

enum EmptyStatus {
  fail, //失败视图
  loading, //加载视图
  nodata, //没有数据视图
  none //没有状态
}

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

2.2 空页面刷新回调

abstract class IEmptyRefresh{

  void pressedReload();

}

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

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 空页面实现类

默认加载中页面


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

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


  // 是否有网
  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封装参见：跟我学企业级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;
      }
    }

感谢大家阅读我的文章

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 162,306评论 4赞 370
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 68,657评论 2赞 307
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 111,928评论 0赞 254
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,688评论 0赞 220
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 53,105评论 3赞 295
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 41,024评论 1赞 225
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 32,159评论 2赞 318
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,937评论 0赞 212
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,689评论 1赞 250
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,851评论 2赞 254
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,325评论 1赞 265
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,651评论 3赞 263
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,364评论 3赞 244
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,192评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,985评论 0赞 201
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 36,154评论 2赞 285
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,955评论 2赞 279