cocos creator从零开发简单框架(07)-UI返回

参考UIMain，创建一个新的UIBag，创建一个名为BtnBack文本为返回的按钮，再创建一个名为BtnMain文本为主页的按钮，然后把 UIBag节点拖动到resources目录下并从场景删除。

新建scripts/UIBag.ts，内容如下。

import UIBase from "../framework/scripts/view/UIBase"
import UIMgr from "../framework/scripts/view/UIMgr"
import UIMain from "./UIMain"


export default class UIBag extends UIBase {
    public skinPath: string = 'UIBag'


    protected onButtonClick(button: cc.Node) {
        switch (button.name) {
            case 'BtnBack':
                UIMgr.open(UIMain)
                break
            case 'BtnMain':
                UIMgr.open(UIMain)
                break
        }
    }
}

编辑scripts/UIMain.ts，onButtonClick方法修改后如下。

protected onButtonClick(button: cc.Node) {
    switch (button.name) {
        case 'BtnUIBag':
            UIMgr.open(UIBag)
            break
    }
}

运行程序，点击背包按钮，现在已经切换到了UIBag界面。

此时点击返回按钮，又切换到了UIMain界面。虽然在这里调用UIMgr.open能够返回到上一个UI，但实际应用中某个UI会从很多地方切换过来，如果再用open 这个接口就不方便了。所以添加一个back接口并用一个堆栈数据记录打开过的UI，切换时候把UI推入栈，返回时显示上一个UI，当换到主页的时候就清空这个数据。

编辑framework/scripts/view/UIMgr.ts，在顶部import下面定义UI堆栈记录。

class UIOpen {
    constructor(public uiCls: any, public args: any[]) { }
}

添加堆栈记录相关成员并添加init方法。

private static _current: UIBase

// 主UI(进入主UI时会清空当前打开的所有UI记录)
private static _uiMain: string
// UI 打开记录
private static _uiOpens: UIOpen[] = []


public static init(uiMain: string) {
    this._uiMain = uiMain
    this._uiOpens = []
}

修改open方法，插入UI记录，并处理主UI相关逻辑。

public static open(uiCls: any, ...uiArgs: any[]) {
    const cls = new uiCls() as UIBase
    const viewName = cls.getClassName()

    if (this._current && this._current.uiName == viewName) {
        console.error(`UIMgr.open 已在当前UI:${viewName}`)
        return
    }

    // 进入主 UI, 把 UI 打开记录清空
    if (this._uiMain == viewName) {
        this._uiOpens = []
    }

    this._uiOpens.push(new UIOpen(uiCls, uiArgs))

    this.show(cls, uiArgs)
}

添加back方法，用于UI回退处理。

/**
 * 回退至上一个 UI
 * @returns 
 */
public static back() {
    if (this._uiOpens.length < 2) {
        console.error('UIMgr.back 切换至上一个场景时, 没有上一个场景记录, 请检查逻辑')
        return
    }

    const prev = this._uiOpens[this._uiOpens.length - 2] //上一个 UI
    this._uiOpens.splice(this._uiOpens.length - 2, 2) //切换至上一个 UI 后, 清除最后一个 UI (即当前UI) 和上一 UI
    this.open(prev.uiCls, prev.args)
}

编辑framework/scripts/App.ts，添加 主UI名称成员、修改init和initFramework方法。

// 主UI(进入主UI时会清空当前打开的所有UI记录)
private static _uiMain: string = 'UIMain'


// 初始化
public static init(uiMain?: string) {
    if (uiMain) this._uiMain = uiMain

    this.initFramework()
}


// 递归显示节点信息
// ...... 省略代码 ......


// 初始化框架
private static initFramework() {
    LayerMgr.init()

    UIMgr.init(this._uiMain)
}

编辑scripts/UIBag.ts， onButtonClick方法修改后如下。

protected onButtonClick(button: cc.Node) {
    switch (button.name) {
        case 'BtnBack':
            UIMgr.back()
            break
        case 'BtnMain':
            UIMgr.open(UIMain)
            break
    }
}

运行程序，点击背包按钮进入UIBag界面后再点击返回按钮可以返回到UIMain界面了。

本作品采用《CC 协议》，转载必须注明作者和本文链接