local parent = GUI:Win_Create("MenuMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建主布局容器
local mainLayout = GUI:Layout_Create(parent, "mainLayout", 300, 300, 300, 600, false)
GUI:Layout_setBackGroundColorOpacity(mainLayout, 150)
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-02-27 01:14:51 |
👁️ 阅读: 9
看到你的代码了，整体结构很不错！不过确实有两个小问题需要调整：
1. **二级菜单位置问题**：二级菜单应该紧挨着一级菜单下方显示，而不是从顶部开始
2. **缺少动画效果**：需要添加展开/收起的动画
下面是优化后的代码：
```lua
local parent = GUI:Win_Create("MenuMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建主布局容器
local mainLayout = GUI:Layout_Create(parent, "mainLayout", 300, 300, 300, 600, false)
GUI:Layout_setBackGroundColorOpacity(mainLayout, 150)
-- 菜单数据
local menuData = {
{name = "菜单1", subMenus = {"子项1-1", "子项1-2", "子项1-3"}},
{name = "菜单2", subMenus = {"子项2-1", "子项2-2", "子项2-3"}},
{name = "菜单3", subMenus = {"子项3-1", "子项3-2", "子项3-3"}},
{name = "菜单4", subMenus = {"子项4-1", "子项4-2", "子项4-3"}},
{name = "菜单5", subMenus = {"子项5-1", "子项5-2", "子项5-3"}}
}
-- 存储菜单状态
local menuStates = {}
local currentOpenMenu = nil
-- 创建一级菜单
for i = 1, 5 do
-- 创建一级菜单按钮
local menuBtn = GUI:Button_Create(mainLayout, "menuBtn_" .. i, 0, 0, "res/public/1900000612.png")
GUI:Button_setTitleText(menuBtn, menuData[i].name)
GUI:setAnchorPoint(menuBtn, 0, 1)
-- 创建二级菜单容器（初始高度为0，隐藏）
local subLayout = GUI:Layout_Create(mainLayout, "subLayout_" .. i, 0, 0, 250, 0, false)
GUI:Layout_setBackGroundColorOpacity(subLayout, 100)
GUI:setVisible(subLayout, false)
GUI:setAnchorPoint(subLayout, 0, 1)
GUI:setContentSize(subLayout, 250, 0) -- 初始高度为0
-- 创建二级菜单项
local subItems = {}
for j = 1, 3 do
local subBtn = GUI:Button_Create(subLayout, "subBtn_" .. i .. "_" .. j, 20, 0, "res/public/1900000612.png")
GUI:Button_setTitleText(subBtn, menuData[i].subMenus[j])
GUI:setAnchorPoint(subBtn, 0, 1)
table.insert(subItems, subBtn)
end
-- 存储菜单状态
menuStates[i] = {
mainBtn = menuBtn,
subLayout = subLayout,
subItems = subItems,
isOpen = false,
targetHeight = 110 -- 3个子项 * 35高度 + 间距
}
-- 一级菜单点击事件
GUI:addOnClickEvent(menuBtn, function()
SL:print("点击了一级菜单：" .. menuData[i].name)
-- 关闭其他菜单（如果有动画）
if currentOpenMenu ~= i and currentOpenMenu then
local prevState = menuStates[currentOpenMenu]
if prevState.isOpen then
-- 收起的动画
GUI:runAction(prevState.subLayout,
GUI:ActionSequence(
GUI:ActionScaleTo(0.2, 1, 0.1), -- 快速收起
GUI:CallFunc(function()
GUI:setVisible(prevState.subLayout, false)
GUI:setContentSize(prevState.subLayout, 250, 0)
GUI:setScale(prevState.subLayout, 1, 1) -- 恢复原始缩放
end)
)
)
prevState.isOpen = false
end
end
-- 切换当前菜单状态
local state = menuStates[i]
state.isOpen = not state.isOpen
if state.isOpen then
-- 展开动画
GUI:setVisible(state.subLayout, true)
GUI:runAction(state.subLayout,
GUI:ActionSequence(
GUI:ActionScaleTo(0.2, 1, 0.1), -- 从0.1缩放到1
GUI:CallFunc(function()
-- 动画完成后更新布局
updateMenuLayout()
end)
)
)
currentOpenMenu = i
else
-- 收起动画
GUI:runAction(state.subLayout,
GUI:ActionSequence(
GUI:ActionScaleTo(0.2, 1, 0.1),
GUI:CallFunc(function()
GUI:setVisible(state.subLayout, false)
GUI:setContentSize(state.subLayout, 250, 0)
GUI:setScale(state.subLayout, 1, 1)
currentOpenMenu = nil
updateMenuLayout()
end)
)
)
end
-- 立即更新一级菜单位置
updateMenuLayout()
end)
end
-- 更新布局函数
function updateMenuLayout()
local totalHeight = 0
local itemSpacing = 10
-- 计算每个菜单的位置
for i = 1, 5 do
local state = menuStates[i]
-- 设置一级菜单位置
GUI:setPosition(state.mainBtn, 0, -totalHeight)
-- 更新总高度（一级菜单高度40）
totalHeight = totalHeight + 40 + itemSpacing
-- 如果二级菜单打开，添加二级菜单位置
if state.isOpen then
-- 设置二级容器位置（紧挨着一级菜单下方）
GUI:setPosition(state.subLayout, 0, -totalHeight)
-- 设置二级菜单位置（在容器内部）
local subHeight = 0
for j, subBtn in ipairs(state.subItems) do
GUI:setPosition(subBtn, 20, -subHeight)
subHeight = subHeight + 35 + 5 -- 二级菜单高度35，间距5
end
-- 更新总高度（加上二级菜单高度）
totalHeight = totalHeight + subHeight + itemSpacing
end
end
-- 更新主容器大小
GUI:setContentSize(mainLayout, 300, totalHeight)
end
-- 初始化布局
updateMenuLayout()
-- 测试：默认打开第一个菜单
GUI:setVisible(menuStates[1].subLayout, true)
GUI:setContentSize(menuStates[1].subLayout, 250, menuStates[1].targetHeight)
menuStates[1].isOpen = true
currentOpenMenu = 1
updateMenuLayout()
```
**主要改进点：**
1. **二级菜单位置修正**：二级容器现在紧挨着一级菜单下方显示
2. **添加展开/收起动画**：使用`GUI:ActionScaleTo`实现缩放动画效果
3. **其他菜单也有动画**：关闭其他菜单时也有收起动画
4. **动画回调**：使用`GUI:CallFunc`在动画完成后更新布局
动画效果会让菜单展开/收起更加自然，而不是突然出现/消失。你可以根据需要调整动画时间（0.2秒）和缩放比例（0.1到1）。
← 返回问答库