ViewBase

视图基类，继承自 LifeCycle，提供 UI 动画、遮罩、编辑器快捷操作等扩展功能

mk.ViewBase 是动态视图基类，可以被 mk.uiManage 打开，继承自 mk.LifeCycle，在生命周期管理的基础上，扩展了以下能力：

• 视图展示配置（单独展示、弹窗动画配置）
• 编辑器快捷操作（遮罩、Widget、BlockInputEvents）
• 外部 close（可作为 mk.uiManage.close 替代）
• 模块类型（用于支持同一脚本不同 UI）

生命周期扩展#

open#

在模块打开时触发，主要执行 打开动画。

• 如果配置了 openAnimationStr，会调用对应的动画函数。
• 可配置是否 等待动画执行完成 , 如果等待，则动画完成才会进入子类的 open 生命周期。

protected async open(): Promise<void> {
  const openAnimationFunc = ViewBase._config.windowAnimationTab?.open?.[this.animationConfig?.openAnimationStr];
  if (openAnimationFunc) {
    if (this.animationConfig.isWaitAnimationComplete) {
      await openAnimationFunc(this.node);
    } else {
      openAnimationFunc(this.node);
    }
  }
}

close(config?)#

• 若是外部调用，则交由 mk.uiManage.close 执行后中断 close。支持传入 CloseConfig 配置。
  // 例如 module 是 mk.ViewBase 类型对象，在外部调用它的 close
  module.close();
  // 此时框架内会使用 mk.uiManage.close 关闭 module，
  // 而不是直接执行 module 的 close 函数，可用于按钮回调和便捷关闭模块
  

• 非外部调用则视为生命周期函数

lateClose#

在 close 之后调用，主要执行 关闭动画。

• 关闭动画仅在以下条件满足时执行：

  1. 非重启中（!mk.game.isRestarting）
  2. 非切换场景（!mk.bundle.isSwitchScene）
  3. 存在对应的关闭动画函数

模块类型#

typeStr#

• 类型：string

• 默认值："default"

• 说明：模块类型标识，用于区分不同的 UI 模块来源。模块类型可在 mk.uiManage.regis 时注册， 然后通过 mk.uiManage.open 打开指定的模块类型，不同的模块类型代表了不同的 UI

• 示例：

  @ccclass('Test')
  export class Test extends mk.ViewBase {
      // 声明模块类型
      typeStr!: 'default' | 'test2';
  }
  
  @ccclass('NewComponent')
  export class NewComponent extends mk.ViewBase {
      protected open(): void | Promise<void> {
          // 注册模块类型来源
          mk.uiManage.regis(
              Test,
              {
                  default: 'db://assets/resources/Module/Test/Test111.prefab',
                  test2: 'db://assets/resources/Module/Test/Test222.prefab',
              },
              this
          );
  
          // open 时可以自由的选择 UI 类型，不同的 UI 相同的组件
          mk.uiManage.open(Test, {
              type: 'test2',
          });
      }
  }
  

属性配置#

isShowAlone（单独展示）#

• 类型：boolean
• 分组：视图配置
• 说明：勾选后，打开该视图时会 隐藏之前打开的模块（不包括渲染层级比自己高的模块），关闭该视图后恢复原状，适合用于全屏 UI 减少 DrawCall

animationConfig（动画配置）#

• 分组：视图配置
• 说明：配置 打开/关闭动画，并决定是否等待动画执行完成。

配置动画#

你需要在编辑器可执行的环境下添加动画函数，以打开动画举例

// 增加一个动画函数，返回动画完成结束的 Promise 任务
GlobalConfig.View.config.windowAnimationTab.open['默认'] = (node) => {
    node = node.getChildByName('窗口') ?? node;

    return new Promise<void>((resolveFunc) => {
        cc.tween(node)
            .to(0.2, { scale: cc.v3(1.1, 1.1) })
            .to(0.1, { scale: cc.v3(0.95, 0.95) })
            .to(0.05, { scale: cc.v3(1, 1, 1) })
            .call(() => {
                resolveFunc();
            })
            .start();
    });
};

编辑器可执行的环境：

• class 块外部

• 使用了 @executeInEditMode 装饰器的组件的生命周期函数内

• main bundle 的 BundleManage 的 open 函数内

编辑器快捷操作#

这些属性仅在 编辑器环境 下生效，便于快速为视图节点添加常用组件。

isAutoMask（添加遮罩）#

• 类型：boolean
• 说明：设为 true 即为在根节点下添加 遮罩 节点，设置为 false 时移除遮罩节点（GlobalConfig.View.config.maskInfo 提供遮罩节点名、颜色配置）

isAutoWidget（0 边距 widget）#

• 类型：boolean
• 说明：在节点上添加 Widget 组件，并设置 0 边距（顶/底/左/右）。

isAutoBlockInput（BlockInputEvents）#

• 类型：boolean
• 说明：在节点上添加 BlockInputEvents，阻止事件穿透。