cocos creator从零开发简单框架(02)-层级管理

关注

原创最新推荐文章于 2026-08-11 17:10:55 发布 364 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

新建framework/scripts/AppConstants.ts，内容如下。目前有3个层级，数值大的层级会显示在数值小的层级上面，中间间隔100可以让用户使用代码在中间动态插入自定义的层级。

export default class AppConstants {
    // View 层级
    public static readonly viewLayer = {
        // UI
        UI: 100,
        // 面板
        Panel: 200,
        // 顶层
        Top: 900,
    }
}

新建framework/scripts/AppUtil.ts，这个脚本是一些常用的函数，供框架内部和用户使用，内容如下。

export default class AppUtil {
    /**
     * 添加对齐组件(默认铺满父节点)
     * @param node 要添加对齐组件的节点
     * @param target 对齐目标(不设置默认父节点)
     */
    public static setWidget(node: cc.Node, target: cc.Node = null, top: number = 0, bottom: number = 0, left: number = 0, right: number = 0) {
        if (node.getComponent(cc.Widget)) return

        const widget = node.addComponent(cc.Widget)

        if (target) widget.target = target

        widget.isAlignTop = true
        widget.isAlignBottom = true
        widget.isAlignLeft = true
        widget.isAlignRight = true

        widget.top = top
        widget.bottom = bottom
        widget.left = left
        widget.right = right
    }
}

新建framework/scripts/view/LayerMgr.ts，内容如下。

import AppConstants from "../AppConstants"
import AppUtil from "../AppUtil"


export default class LayerMgr {
    // 层级及对应节点
    private static _layerMap: Map<number, cc.Node> = new Map()

    private static _zIndex: number = 0


    // 初始化层级
    public static init() {
        // 框架初始化和切换场景后都会调用, 所以要清除之前的数据
        this._layerMap.clear()

        for (const name in AppConstants.viewLayer) {
            const value = AppConstants.viewLayer[name] as number
            this.newLayer(name, value)
        }
    }

    /**
     * 创建新层级
     * @param name 层级名称
     * @param value 层级 zIndex
     * @returns
     */
    public static newLayer(name: string, value: number) {
        let layer = cc.Canvas.instance.node.getChildByName(name)
        if (layer) return

        layer = new cc.Node(name)
        layer.parent = cc.Canvas.instance.node
        layer.zIndex = value

        // 挂载 Widget 组件, 保持跟 Canvas 一样大小
        AppUtil.setWidget(layer)

        this._layerMap.set(value, layer)
    }

    /**
     * 为节点设置层级父节点并把节点显示在最上层
     * @param node 节点
     * @param layer 层级
     */
    public static setLayer(node: cc.Node, layer: number) {
        const layerNode = this._layerMap.get(layer)
        if (!layerNode) {
            console.error(`LayerMgr.setLayer layer[${layer}] 不存在`)
            return
        }

        if (!node.parent) {
            node.parent = layerNode
        }

        node.zIndex = this._zIndex++
    }
}