如何清除或重置Decentraland的UIContainerRect？旧按钮未消失

我创建了带有lowerContainer属性的自定义UICreator类，该属性包含一个按钮。尝试移除旧按钮添加新按钮时，新按钮出现后旧按钮仍未消失。我尝试重建整个UI并重置按钮容器，但第一个按钮依然存在。

简化代码： #

Constants.ts

export class Globals {
    static readonly CANVAS = new UICanvas()
}

UICreator.ts

import { Globals } from "Constants"
export class UICreator
{
   lowerContainer: UIContainerRect

    constructor() {
        // 原代码拼写错误：应为Globals而非Global
        this.lowerContainer = new UIContainerRect(Globals.CANVAS)
        this.lowerContainer.width   = "100%"
        this.lowerContainer.height  = "15%"
        this.lowerContainer.hAlign  = "center"
        this.lowerContainer.vAlign  = "bottom"
        this.lowerContainer.visible = true
    }

    addButton(label: string) {
        // 原代码缺失闭合括号，已补充
        let btn = new UIImage(this.lowerContainer, new Texture('assets/btn.png'))

        let btnLabel = new UIText(btn)
        btnLabel.value = label ?? 'no-label?'
    }
}

game.ts

const ui = new UICreator()
ui.addButton('Continue')
ui.lowerContainer = new UIContainerRect(Globals.CANVAS)  // 尝试"重置"容器
ui.addButton('Finish')

问题现象： #

我查阅了UIImage、UIText和UIContainer的属性与方法，寻找“自我销毁”或“重置”功能。作为Decentraland和TypeScript新手，推测遗漏了关键内容。

问题核心：直接给lowerContainer赋值新对象时，旧的容器实例仍然挂载在UICanvas上，没有被移除，所以旧按钮会继续显示。

方法1：移除旧容器后重建 #

在UICreator类中添加重置逻辑，先移除旧容器再创建新的：

import { Globals } from "Constants"
export class UICreator
{
   lowerContainer: UIContainerRect

    constructor() {
        this.initLowerContainer()
    }

    // 提取容器初始化逻辑，方便复用
    private initLowerContainer() {
        this.lowerContainer = new UIContainerRect(Globals.CANVAS)
        this.lowerContainer.width   = "100%"
        this.lowerContainer.height  = "15%"
        this.lowerContainer.hAlign  = "center"
        this.lowerContainer.vAlign  = "bottom"
        this.lowerContainer.visible = true
    }

    resetLowerContainer() {
        // 从父节点中移除旧容器
        if (this.lowerContainer) {
            this.lowerContainer.parent?.removeChild(this.lowerContainer)
        }
        // 初始化新容器
        this.initLowerContainer()
    }

    addButton(label: string) {
        let btn = new UIImage(this.lowerContainer, new Texture('assets/btn.png'))
        let btnLabel = new UIText(btn)
        btnLabel.value = label ?? 'no-label?'
    }
}

在game.ts中调用重置方法：

const ui = new UICreator()
ui.addButton('Continue')
ui.resetLowerContainer() // 用重置方法代替直接赋值
ui.addButton('Finish')

方法2：清空容器内的子元素（更高效） #

如果不需要重建容器，直接删除容器内的所有子元素即可：

// 在UICreator类中添加清空方法
clearButtons() {
    // 循环移除所有子元素
    while (this.lowerContainer.children.length > 0) {
        this.lowerContainer.removeChild(this.lowerContainer.children[0])
    }
}

使用时：

const ui = new UICreator()
ui.addButton('Continue')
ui.clearButtons() // 清空旧按钮
ui.addButton('Finish')

额外修正： #

原代码有两处拼写/语法错误：

1. 构造函数中Global.CANVAS应为Globals.CANVAS（导入的是Globals类）
2. addButton方法中UIImage的构造函数缺失闭合括号

内容的提问来源于stack exchange，提问作者franco