UI界面显示与隐藏,菜单按钮的实现

假设存在 panel 对象,我们可以通过以下方式来控制它的显示与隐藏。

local panel = class.panel:builder
{
    type = 'panel',
    x = 0,
    y = 0,
    w = 1920,
    h = 1080,
}

panel:hide() --通过脚本创建的UI,默认是显示的,因此需要在此调用 :hide() 使其隐藏。

现在假设存在两个按钮用于控制其显示和隐藏。

local btnA = class.button:builder
{
    type = 'button',
    x = 100,
    y = 100,
    w = 60,
    h = 20,
    
    m_text = {
        type = 'text',
        x = 0,
        y = 0,
        w = 60,
        h = 20,
        text = '显示'
    },
    
    on_button_clicked = function(self)
        on_click_button(1)
    end,
}
local btnB = class.button:builder
{
    type = 'button',
    x = 100,
    y = 100,
    w = 60,
    h = 20,
    
    m_text = {
        type = 'text',
        x = 0,
        y = 0,
        w = 60,
        h = 20,
        text = '隐藏'
    },
    
    on_button_clicked = function(self)
        on_click_button(2)
    end,
}

其中 on_button_clicked 是点击按钮以后,在游戏内产生的回调方法。

可以在这里设置按钮的功能,此处我们调用 on_click_button 函数。

这样,就可以通过点击按钮来控制 panel 对象的显示与隐藏了。

倘若我们需要做菜单按钮,当玩家点击的时候会切换页面,而非显示/隐藏页面,可以做如下修改。

通过上述修改,当玩家点击按钮的时候会切换页面,而非显示/隐藏页面。

如果我们需要更智能地去支持多个菜单按钮的切换,可以用如下写法:

可以批量的为所有按钮注册ID,并注册点击事件。

倘若我们需要在切换页面时刷新,可以为按钮被点击的事件添加刷新页面的逻辑。

Last updated