做一个伸缩按钮界面,两个 主按钮,每个主按钮下有三个子按钮,当一个主按钮展开,另一个主按钮缩回
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-30 16:34:11 |
👁️ 阅读: 14
我来帮你创建一个伸缩按钮界面。这个界面有两个主按钮，每个主按钮下有三个子按钮，当一个主按钮展开时，另一个主按钮会自动缩回。
```lua
-- 创建主界面
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 主按钮1
local mainButton1 = GUI:Button_Create(parent, "mainButton1", 100, 300, "res/public/1900000612.png")
GUI:Button_setTitleText(mainButton1, "主按钮1")
GUI:setAnchorPoint(mainButton1, 0.5, 0.5)
-- 主按钮2
local mainButton2 = GUI:Button_Create(parent, "mainButton2", 250, 300, "res/public/1900000612.png")
GUI:Button_setTitleText(mainButton2, "主按钮2")
GUI:setAnchorPoint(mainButton2, 0.5, 0.5)
-- 子按钮容器1
local subContainer1 = GUI:Layout_Create(parent, "subContainer1", 100, 200, 100, 300, false)
GUI:setVisible(subContainer1, false)
GUI:setAnchorPoint(subContainer1, 0.5, 1)
-- 子按钮容器2
local subContainer2 = GUI:Layout_Create(parent, "subContainer2", 250, 200, 100, 300, false)
GUI:setVisible(subContainer2, false)
GUI:setAnchorPoint(subContainer2, 0.5, 1)
-- 创建子按钮函数
local function createSubButtons(container, baseName)
for i = 1, 3 do
local subBtn = GUI:Button_Create(container, baseName .. i, 0, (i-1) * -80, "res/public/1900000612.png")
GUI:Button_setTitleText(subBtn, "子按钮" .. i)
GUI:setAnchorPoint(subBtn, 0.5, 0.5)
GUI:setOpacity(subBtn, 0) -- 初始透明
-- 子按钮点击事件
GUI:addOnClickEvent(subBtn, function()
SL:Print("点击了" .. baseName .. "的子按钮" .. i)
end)
end
end
-- 创建子按钮
createSubButtons(subContainer1, "sub1_")
createSubButtons(subContainer2, "sub2_")
-- 展开动画函数
local function expandContainer(container, mainBtn)
GUI:setVisible(container, true)
-- 获取子按钮
for i = 1, 3 do
local childName = "sub" .. (container == subContainer1 and "1_" or "2_") .. i
local childBtn = GUI:getChildByName(container, childName)
if not GUI:Win_IsNull(childBtn) then
-- 淡入动画
GUI:runAction(childBtn,
GUI:ActionSequence(
GUI:DelayTime((i-1) * 0.1),
GUI:ActionFadeTo(0.2, 255)
)
)
-- 上移动画
local targetY = (i-1) * -80
GUI:setPosition(childBtn, 0, targetY + 50) -- 初始位置偏下
GUI:runAction(childBtn,
GUI:ActionSequence(
GUI:DelayTime((i-1) * 0.1),
GUI:ActionMoveTo(0.3, 0, targetY)
)
)
end
end
end
-- 收起动画函数
local function collapseContainer(container)
-- 获取子按钮
for i = 1, 3 do
local childName = "sub" .. (container == subContainer1 and "1_" or "2_") .. i
local childBtn = GUI:getChildByName(container, childName)
if not GUI:Win_IsNull(childBtn) then
-- 淡出动画
GUI:runAction(childBtn,
GUI:ActionSequence(
GUI:DelayTime((3-i) * 0.1),
GUI:ActionFadeTo(0.2, 0),
GUI:CallFunc(function()
if i == 1 then
GUI:setVisible(container, false)
end
end)
)
)
end
end
end
-- 当前展开状态
local currentExpanded = nil
-- 主按钮1点击事件
GUI:addOnClickEvent(mainButton1, function()
if currentExpanded == mainButton1 then
-- 如果已经展开，则收起
collapseContainer(subContainer1)
currentExpanded = nil
else
-- 收起另一个主按钮
if currentExpanded == mainButton2 then
collapseContainer(subContainer2)
end
-- 展开当前主按钮
expandContainer(subContainer1, mainButton1)
currentExpanded = mainButton1
end
end)
-- 主按钮2点击事件
GUI:addOnClickEvent(mainButton2, function()
if currentExpanded == mainButton2 then
-- 如果已经展开，则收起
collapseContainer(subContainer2)
currentExpanded = nil
else
-- 收起另一个主按钮
if currentExpanded == mainButton1 then
collapseContainer(subContainer1)
end
-- 展开当前主按钮
expandContainer(subContainer2, mainButton2)
currentExpanded = mainButton2
end
end)
SL:Print("伸缩按钮界面创建完成！点击主按钮可以展开/收起子按钮")
```
这个实现有以下特点：
1. **两个主按钮**：分别位于屏幕左侧和右侧
2. **三个子按钮**：每个主按钮下都有三个子按钮
3. **互斥展开**：当一个主按钮展开时，另一个会自动收起
4. **动画效果**：子按钮有淡入淡出和移动动画
5. **点击事件**：主按钮和子按钮都有对应的点击响应
**使用说明**：
- 点击"主按钮1"会展开它的三个子按钮，同时收起"主按钮2"的子按钮
- 再次点击已展开的主按钮会收起它的子按钮
- 子按钮点击时会在控制台输出信息
动画效果让界面更加流畅，子按钮会依次出现和消失，增强了用户体验。
← 返回问答库