美文网首页
3.1.Flutter-接口动画插件配合EventBus使用

3.1.Flutter-接口动画插件配合EventBus使用

作者: ChaosHeart | 来源:发表于2023-04-13 12:03 被阅读0次

    1.EventBus = flutter2.0.6

    //定义一个top-level(全局)变量,页面引入该文件后可以直接使用bus
    var eBus = new EventBus();
    
    //订阅者回调签名
    typedef void EventCallback(arg);
    
    class EventBus {
      //私有构造函数
      EventBus._internal();
    
      //保存单例
      static EventBus _singleton = new EventBus._internal();
    
      //工厂构造函数
      factory EventBus() => _singleton;
    
      //保存事件订阅者队列,key:事件名(id),value: 对应事件的订阅者队列
      var _emap = new Map<Object, List<EventCallback>>();
    
      //添加订阅者
      void on(eventName, EventCallback f) {
        if (eventName == null || f == null) return;
        _emap[eventName] ??= new List<EventCallback>();
        _emap[eventName].add(f);
      }
    
      //移除订阅者
      void off(eventName, EventCallback f) {
        var list = _emap[eventName];
        if (eventName == null || list == null) return;
        if (f == null) {
          _emap[eventName] = null;
        } else {
          list.remove(f);
        }
      }
    
      //触发事件,事件触发后该事件所有订阅者会被调用
      void emit(eventName, [arg]) {
        var list = _emap[eventName];
        if (list == null) return;
        int len = list.length - 1;
        //反向遍历,防止在订阅者在回调中移除自身带来的下标错位
        for (var i = len; i > -1; --i) {
          list[i](arg);
        }
      }
    }
    
    

    1.EventBus = flutter3.7.0

    //定义一个top-level(全局)变量,页面引入该文件后可以直接使用bus
    var eBus = EventBus();
    
    //订阅者回调签名
    typedef EventCallback = void Function(dynamic arg);
    
    class EventBus {
      //私有构造函数
      EventBus._internal();
    
      //保存单例
      static final EventBus _singleton = EventBus._internal();
    
      //工厂构造函数
      factory EventBus() => _singleton;
    
      //保存事件订阅者队列,key:事件名(id),value: 对应事件的订阅者队列
      final _eMap = <Object, List<EventCallback>>{};
    
      //添加订阅者
      void on(eventName, EventCallback f) {
        if (eventName == null) return;
        _eMap[eventName] ??= <EventCallback>[];
        _eMap[eventName]!.add(f);
      }
    
      //移除订阅者
      void off(eventName, EventCallback f) {
        var list = _eMap[eventName];
        if (eventName == null || list == null) return;
        list.remove(f);
        if (_eMap[eventName]!.isEmpty) _eMap.remove(eventName);
      }
    
      //触发事件,事件触发后该事件所有订阅者会被调用
      void emit(eventName, [arg]) {
        var list = _eMap[eventName];
        if (list == null) return;
        int len = list.length - 1;
        //反向遍历,防止在订阅者在回调中移除自身带来的下标错位
        for (var i = len; i > -1; --i) {
          list[i](arg);
        }
      }
    }
    
    

    2.接口动画

    //接口监听
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:imes_base_plugins/EventBus.dart';
    import 'package:imes_base_plugins/common/logs.dart';
    
    //监听接口
    EventCallback dioErrorEvent;
    //接口提示-保证只进行一次
    bool showNetwork = false;
    //是否启用动画
    bool isShowAnimation = true;
    
    ///0 开启事件线-接口监听
    onDioNetworkListener(BuildContext context) {
      //网络错误时
      dioErrorEvent = (arg) {
        if (isShowAnimation) _dismissEndProgressDialog(context);
      };
      eBus.on("DioError", dioErrorEvent);
    }
    
    ///0 关闭事件线-接口监听
    offDioNetworkListener() {
      eBus.off("DioError", dioErrorEvent);
    }
    
    /*
    用法:
    bool isDio = startDioNetworkAnimation(context);
    logs("dio是否执行接口: $isDio");
    if (isDio == false) return Future.value(false);
    * */
    
    ///1 接口开启动画  milliseconds=100:init,milliseconds500:then
    bool startDioNetworkAnimation(
      BuildContext context, {
      bool isShow = true, //默认开启动画
      bool barrierDismissible = false, //false:不允许点击空白关闭动画
      bool willPopScope = true, //true:允许点击硬件返回键关闭动画
    }) {
      if (showNetwork == false) {
        showNetwork = true;
        isShowAnimation = isShow;
        if (isShow) _showStartProgressDialog(context, barrierDismissible: barrierDismissible, willPopScope: willPopScope);
        return true;
      }
      return false;
    }
    
    ///1 网络刷新动画
    Future _showStartProgressDialog(
      BuildContext context, {
      bool barrierDismissible,
      bool willPopScope,
    }) async {
      var dialog = showDialog(
        barrierDismissible: barrierDismissible,
        context: context,
        builder: (BuildContext context) {
          return WillPopScope(
            onWillPop: () {
              logs("2接口结束...$showNetwork");
              if (willPopScope) showNetwork = false;
              return Future.value(willPopScope);
            },
            child: Scaffold(
              backgroundColor: Colors.transparent,
              body: Center(
                child: Container(
                  height: 56,
                  width: 56,
                  child: CircularProgressIndicator(),
                ),
              ),
            ),
          );
        },
      );
      logs("0接口开始...");
      return dialog;
    }
    
    ///2 接口关闭动画
    bool endDioNetworkAnimation(
      BuildContext context, {
      bool isShow = true, //默认开启动画
      int milliseconds = 0,
    }) {
      if (isShow == false) showNetwork = false;
      isShowAnimation = isShow;
      if (isShow) _dismissEndProgressDialog(context, milliseconds: milliseconds);
      return true;
    }
    
    ///2 隐藏刷新动画
    _dismissEndProgressDialog(
      BuildContext context, {
      int milliseconds = 0,
    }) {
      //
      if (showNetwork == false) return;
      showNetwork = false;
      logs("1接口结束...$showNetwork");
      //
      if (milliseconds == 0) {
        Navigator.of(context).pop();
      } else {
        Future.delayed(Duration(milliseconds: milliseconds), () {
          Navigator.of(context).pop();
        });
      }
    }
    
    
    
    

    相关文章

      网友评论

          本文标题:3.1.Flutter-接口动画插件配合EventBus使用

          本文链接:https://www.haomeiwen.com/subject/xppaddtx.html