当前位置：首页 > news >正文

第三章：UI 系统架构拆解与动态界面管理实录

news 来源：原创 2025/6/11 16:59:15

还记得我们第二章刚跑通主场景，那时候是不是觉得“终于见到界面了”？但请等等，你看到的只是冰山一角，下面藏着的是 UIManager 的地狱之门。

本章我们将深入探讨：

UI 界面如何加载（Prefab 动态加载机制）
UIManager 的职责划分与扩展方式
多层级弹窗的实现与交互逻辑
UI 缓存机制与复用策略
动态绑定、异步初始化、点击穿透等实际开发坑

我们以 HallScene 为例，逐步分析主界面 UI 加载的全过程，并提供完整源码结构与实现方式。

一、界面加载的核心流程

在项目主场景中，大部分主界面是由 UIManager 控制加载的：

UIManager.showUI("UIMainHall", () => {console.log("大厅主界面加载完成");
});

UIManager 的职责就是维护一套 UI 栈，并且支持弹窗控制、界面缓存与卸载逻辑。

核心结构如下：

const UIManager = {uiStack: [],             // 当前打开的UI界面栈uiCache: {},             // 缓存的 prefab 实例uiRoot: null,            // 根节点容器init(rootNode) {this.uiRoot = rootNode;},showUI(name, callback) {if (this.uiCache[name]) {this._activateUI(name);callback && callback();return;}cc.loader.loadRes("ui/" + name, cc.Prefab, (err, prefab) => {if (err) {console.error("加载UI失败", name, err);return;}let uiNode = cc.instantiate(prefab);this.uiRoot.addChild(uiNode);this.uiCache[name] = uiNode;this.uiStack.push(name);callback && callback();});},closeUI(name) {let uiNode = this.uiCache[name];if (uiNode) {uiNode.removeFromParent();delete this.uiCache[name];this.uiStack = this.uiStack.filter(n => n !== name);}},_activateUI(name) {let uiNode = this.uiCache[name];if (uiNode) uiNode.active = true;}
};

二、UI分层机制（防穿透、防混乱）

在复杂场景中，一定要把 UI 分层，典型分为：

Scene 层（常驻 UI）
Window 层（普通弹窗）
Modal 层（模态遮罩）
Tips 层（Toast/消息）

初始化时结构如下：

this.uiRoot = new cc.Node("UIRoot");
this.uiRoot.addChild(new cc.Node("SceneLayer"));
this.uiRoot.addChild(new cc.Node("WindowLayer"));
this.uiRoot.addChild(new cc.Node("ModalLayer"));
this.uiRoot.addChild(new cc.Node("TipsLayer"));

每次加载界面都要指定其层级：

let targetLayer = this.uiRoot.getChildByName("WindowLayer");
targetLayer.addChild(uiNode);

三、界面复用与缓存优化

为什么缓存？

动态加载太慢，影响体验
热更更新资源时 prefab 不变
弹窗频繁使用（如提示框、设置面板）

如何判断是否可复用？

无状态类 UI（如提示类、头像框）建议复用
强状态类 UI（如创建房间、匹配中）建议销毁后重建

示例：

if (!this.uiCache["UITip"]) {let prefab = await cc.resources.load("ui/UITip", cc.Prefab);let node = cc.instantiate(prefab);this.uiRoot.addChild(node);this.uiCache["UITip"] = node;
}

四、常见 UI 问题与调试技巧

问题 1：按钮无效点击

检查：

Button 是否启用 interactable？
是否被透明遮罩挡住？
节点是否 active=false？

buttonNode.getComponent(cc.Button).interactable = true;

问题 2：穿透点击

解决方式：添加透明节点吸收事件：

let blocker = new cc.Node("Blocker");
let comp = blocker.addComponent(cc.BlockInputEvents);

问题 3：切换场景后 UI 丢失

确保 UIRoot 为常驻节点：

cc.game.addPersistRootNode(this.uiRoot);

五、UI 动画与协程处理

所有动画建议统一管理，防止资源释放冲突。

async showPopup(node) {node.opacity = 0;node.scale = 0.5;cc.tween(node).to(0.2, { opacity: 255, scale: 1.0 }, { easing: 'backOut' }).start();
}

延时关闭的协程动画：

async hideWithDelay(node, delay) {await this.wait(delay);cc.tween(node).to(0.2, { scale: 0.3, opacity: 0 }).call(() => node.removeFromParent()).start();
}