UI 管理

关于 UI 管理的使用描述

前置知识:

替换 Component#

对于重复利用的节点而言，节点上组件的 onEnable、onDisable 并不能代替节点的加载/卸载回调，所以需要一个单独的生命周期基类代替 Component

使用 mk.ViewBase 或 mk.StaticViewBase 代替 Component

@ccclass('NewComponent')
export class NewComponent extends mk.ViewBase {}

相同点#

mk.ViewBase 和 mk.StaticViewBase 都是继承于 mk.LifeCycle，有相同的生命周期回调函数。

不同点#

  • mk.ViewBase 是动态视图基类，可以被 mk.uiManage 管理(打开/关闭)。

  • mk.StaticViewBase 是静态视图基类，不被 mk.uiManage 管理，也没有 mk.ViewBase 的属性面板配置和层级控制。

你也可以只用 mk.ViewBase 来替换 Component，mk.StaticViewBase 是为了屏蔽掉多余的属性面板展示

生命周期回调#

函数名何时被调用描述
create动态视图：添加父节点后。静态视图：onLoad 时onLoad 的替代品，用于初始化视图
opencreate -> 递归子组件 create 和 open-> open模块打开回调
closeclose -> 递归子组件 close模块关闭回调

打开动态模块(加载)#

  1. 注册

    注册只需执行一次，用于保存加载模块时只需传递单次的数据，第四个参数为配置，可以在 VSCode 中转到定义查看详细信息

    // 注册一个可多次加载的模块，资源在 db://assets/resources/Test/Test.prefab，默认父节点为 Scene
mk.uiManage.regis(NewComponent, 'Test/Test', null, {
    isRepeat: true,
    parent: () => cc.director.getScene(),
    loadConfig: {
        bundleStr: 'resources',
    },
});

  2. 打开

    mk.uiManage.open(NewComponent);

关闭动态模块#

示例为在点击回调中关闭自身的三种方式

@ccclass('NewComponent')
export class NewComponent extends mk.ViewBase {
    clickClose(): void {
        // 类型
        mk.uiManage.close(NewComponent);
        // 类型对象
        mk.uiManage.close(this);
        // 节点
        mk.uiManage.close(this.node);
    }
}