帮我写一个二级菜单 一级菜单为5个按钮 二级菜单只有点击了一级菜单才能出现二级菜单
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-05-29 18:35:58 |
👁️ 阅读: 1
我来帮你写一个二级菜单的实现方案。根据浮生梦老师前端课程内容，我们需要创建两个层级，一级菜单固定显示，二级菜单在点击一级菜单后才显示。
```lua
-- 创建主窗口作为容器
local mainWindow = GUI:Win_Create("MainMenu", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建一级菜单容器
local primaryContainer = GUI:Layout_Create(mainWindow, "PrimaryContainer", 50, 200, 400, 60, false)
GUI:setAnchorPoint(primaryContainer, 0.00, 0.00)
GUI:setTouchEnabled(primaryContainer, false)
-- 创建二级菜单容器（初始隐藏）
local secondaryContainer = GUI:Layout_Create(mainWindow, "SecondaryContainer", 50, 140, 400, 60, false)
GUI:setAnchorPoint(secondaryContainer, 0.00, 0.00)
GUI:setTouchEnabled(secondaryContainer, false)
GUI:setVisible(secondaryContainer, false) -- 初始隐藏
-- 一级菜单按钮数据
local primaryButtons = {
{name = "菜单1", tag = 1},
{name = "菜单2", tag = 2},
{name = "菜单3", tag = 3},
{name = "菜单4", tag = 4},
{name = "菜单5", tag = 5}
}
-- 二级菜单按钮数据（每个一级菜单对应的二级菜单）
local secondaryButtons = {
[1] = {{name = "子项1-1"}, {name = "子项1-2"}, {name = "子项1-3"}},
[2] = {{name = "子项2-1"}, {name = "子项2-2"}},
[3] = {{name = "子项3-1"}, {name = "子项3-2"}, {name = "子项3-3"}},
[4] = {{name = "子项4-1"}},
[5] = {{name = "子项5-1"}, {name = "子项5-2"}}
}
-- 当前选中的一级菜单
local currentPrimary = nil
-- 创建一级菜单按钮
for i, btnData in ipairs(primaryButtons) do
local x = (i-1) * 80 -- 每个按钮间隔80像素
local btn = GUI:Button_Create(primaryContainer, "PrimaryBtn_"..i, x, 0, "res/public/1900000612.png")
GUI:setContentSize(btn, 70, 50)
GUI:setIgnoreContentAdaptWithSize(btn, false)
GUI:Button_setTitleText(btn, btnData.name)
GUI:Button_setTitleColor(btn, "#ffffff")
GUI:Button_setTitleFontSize(btn, 16)
GUI:Button_titleEnableOutline(btn, "#000000", 1)
GUI:setAnchorPoint(btn, 0.00, 0.00)
GUI:setTouchEnabled(btn, true)
GUI:setTag(btn, btnData.tag)
-- 添加点击事件
GUI:addOnClickEvent(btn, function()
local tag = GUI:getTag(btn)
-- 如果点击的是当前已选中的按钮，隐藏二级菜单
if currentPrimary == tag then
GUI:setVisible(secondaryContainer, false)
currentPrimary = nil
return
end
-- 更新当前选中
currentPrimary = tag
-- 清空二级菜单容器
GUI:removeAllChildren(secondaryContainer)
-- 创建对应的二级菜单
local subBtns = secondaryButtons[tag]
if subBtns then
for j, subData in ipairs(subBtns) do
local subX = (j-1) * 80
local subBtn = GUI:Button_Create(secondaryContainer, "SecondaryBtn_"..tag.."_"..j, subX, 0, "res/public/1900000612.png")
GUI:setContentSize(subBtn, 70, 50)
GUI:setIgnoreContentAdaptWithSize(subBtn, false)
GUI:Button_setTitleText(subBtn, subData.name)
GUI:Button_setTitleColor(subBtn, "#ffffff")
GUI:Button_setTitleFontSize(subBtn, 14)
GUI:Button_titleEnableOutline(subBtn, "#000000", 1)
GUI:setAnchorPoint(subBtn, 0.00, 0.00)
GUI:setTouchEnabled(subBtn, true)
-- 二级菜单点击事件
GUI:addOnClickEvent(subBtn, function()
SL:Print("点击了二级菜单:", btnData.name, "->", subData.name)
end)
end
end
-- 显示二级菜单
GUI:setVisible(secondaryContainer, true)
end)
end
-- 点击其他地方隐藏二级菜单的函数
local function hideSecondaryMenu()
if currentPrimary then
GUI:setVisible(secondaryContainer, false)
currentPrimary = nil
end
end
-- 可以添加一个背景点击区域来隐藏菜单
local background = GUI:Layout_Create(mainWindow, "Background", 0, 0, 800, 600, false)
GUI:setTouchEnabled(background, true)
GUI:addOnClickEvent(background, hideSecondaryMenu)
```
这个实现方案的特点：
1. **一级菜单**：创建5个水平排列的按钮，使用指定的背景图片
2. **二级菜单**：点击一级菜单后动态创建对应的二级菜单
3. **交互逻辑**：
- 点击一级菜单显示对应的二级菜单
- 再次点击同一级菜单隐藏二级菜单
- 点击不同一级菜单切换二级菜单内容
- 点击空白区域隐藏二级菜单
4. **视觉效果**：
- 一级菜单按钮较大，文字16号
- 二级菜单按钮稍小，文字14号
- 按钮都有黑色描边，提高可读性
你可以根据需要调整按钮位置、大小、间距和样式。如果需要更复杂的动画效果，可以添加`GUI:runAction()`来实现淡入淡出或滑动效果。
← 返回问答库