用这个函数 写一个一级菜单 打开后 一级菜单伸展 有很多二级菜单 再点击收回 其他的一级菜单也跟着移动
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-02-27 00:54:16 |
👁️ 阅读: 22
在浮生梦老师的前端课程中，要创建一个带展开/收起功能的折叠菜单，可以通过动态调整容器大小和位置，并配合布局刷新来实现。下面是一个基于现有函数的实现示例：
```lua
-- 创建主界面
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建一级菜单容器
local mainMenu = GUI:Layout_Create(parent, "mainMenu", 100, 300, 200, 50, false)
GUI:Layout_setBackGroundColorOpacity(mainMenu, 255)
GUI:Layout_setBackGroundImage(mainMenu, "res/public/1900000610.png")
GUI:setTouchEnabled(mainMenu, true)
-- 创建一级菜单标题
local menuTitle = GUI:Text_Create(mainMenu, "menuTitle", 10, 25, 16, "#ffffff", "主菜单")
GUI:Text_enableOutline(menuTitle, "#000000", 0)
GUI:setAnchorPoint(menuTitle, 0, 0.5)
-- 创建二级菜单容器（初始隐藏）
local subMenuContainer = GUI:Layout_Create(mainMenu, "subMenuContainer", 0, -10, 200, 0, false)
GUI:Layout_setBackGroundColorOpacity(subMenuContainer, 200)
GUI:setVisible(subMenuContainer, false)
-- 创建几个二级菜单项
local subItems = {}
for i = 1, 3 do
local item = GUI:Layout_Create(subMenuContainer, "subItem_"..i, 10, -i*40, 180, 35, false)
GUI:Layout_setBackGroundColorOpacity(item, 150)
local text = GUI:Text_Create(item, "text", 10, 17, 14, "#ffffff", "子菜单"..i)
GUI:Text_enableOutline(text, "#000000", 0)
GUI:setAnchorPoint(text, 0, 0.5)
table.insert(subItems, item)
end
-- 菜单展开状态
local isExpanded = false
local originalHeight = 50
local expandedHeight = 170 -- 50 + 3*40
-- 点击一级菜单展开/收起
GUI:addOnClickEvent(mainMenu, function()
if isExpanded then
-- 收起菜单
GUI:setContentSize(subMenuContainer, 200, 0)
GUI:setContentSize(mainMenu, 200, originalHeight)
GUI:setVisible(subMenuContainer, false)
-- 其他一级菜单上移
-- 这里需要获取其他菜单并调整位置
-- local otherMenu = GUI:getChildByName(parent, "otherMenu")
-- if not GUI:Win_IsNull(otherMenu) then
-- local pos = GUI:getPosition(otherMenu)
-- GUI:setPosition(otherMenu, pos.x, pos.y + expandedHeight - originalHeight)
-- end
else
-- 展开菜单
GUI:setVisible(subMenuContainer, true)
GUI:setContentSize(subMenuContainer, 200, 120)
GUI:setContentSize(mainMenu, 200, expandedHeight)
-- 其他一级菜单下移
-- local otherMenu = GUI:getChildByName(parent, "otherMenu")
-- if not GUI:Win_IsNull(otherMenu) then
-- local pos = GUI:getPosition(otherMenu)
-- GUI:setPosition(otherMenu, pos.x, pos.y - (expandedHeight - originalHeight))
-- end
end
-- 切换状态
isExpanded = not isExpanded
-- 刷新布局
GUI:Layout_doLayout(mainMenu)
if not GUI:Win_IsNull(subMenuContainer) then
GUI:Layout_doLayout(subMenuContainer)
end
end)
-- 创建另一个一级菜单用于演示联动效果
local otherMenu = GUI:Layout_Create(parent, "otherMenu", 100, 240, 200, 50, false)
GUI:Layout_setBackGroundColorOpacity(otherMenu, 255)
GUI:Layout_setBackGroundImage(otherMenu, "res/public/1900000610.png")
local otherTitle = GUI:Text_Create(otherMenu, "otherTitle", 10, 25, 16, "#ffffff", "其他菜单")
GUI:Text_enableOutline(otherTitle, "#000000", 0)
GUI:setAnchorPoint(otherTitle, 0, 0.5)
```
**关键点说明：**
1. **动态调整大小**：通过 `GUI:setContentSize()` 改变菜单容器的高度来实现展开/收起效果
2. **位置联动**：当某个菜单展开时，通过 `GUI:setPosition()` 调整其他菜单的位置（示例中注释部分）
3. **布局刷新**：使用 `GUI:Layout_doLayout()` 确保子控件正确排列
4. **状态管理**：用 `isExpanded` 变量记录当前展开状态
5. **容器嵌套**：二级菜单放在独立的 `subMenuContainer` 中，便于整体显示/隐藏
**扩展建议：**
- 可以封装成可复用的菜单组件
- 添加展开/收起的动画效果（使用 `GUI:ActionSequence`）
- 使用 `GUI:ScrollView_Create` 如果二级菜单过多
- 通过 `GUI:getChildByName` 获取同级菜单实现联动
这个实现展示了折叠菜单的核心逻辑，你可以根据实际需求调整样式和交互细节。
← 返回问答库