帮我做一个伸缩按钮界面,两个主按钮,每个主按钮下有三个子按钮
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-30 16:28:26 |
👁️ 阅读: 21
我来帮你创建一个伸缩按钮界面，包含两个主按钮，每个主按钮下有三个子按钮。
```lua
-- 创建主界面
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建第一个主按钮
local mainBtn1 = GUI:Button_Create(parent, "main_btn1", 100, 300, "res/public_win32/1900000612.png")
GUI:Button_setTitleText(mainBtn1, "主按钮1")
GUI:setAnchorPoint(mainBtn1, 0.5, 0.5)
GUI:setTouchEnabled(mainBtn1, true)
-- 创建第二个主按钮
local mainBtn2 = GUI:Button_Create(parent, "main_btn2", 200, 300, "res/public_win32/1900000612.png")
GUI:Button_setTitleText(mainBtn2, "主按钮2")
GUI:setAnchorPoint(mainBtn2, 0.5, 0.5)
GUI:setTouchEnabled(mainBtn2, true)
-- 创建第一个主按钮的子按钮容器
local subPanel1 = GUI:Layout_Create(parent, "sub_panel1", 100, 250, 50, 150, false)
GUI:setVisible(subPanel1, false) -- 初始隐藏
GUI:setTouchEnabled(subPanel1, true)
-- 创建第二个主按钮的子按钮容器
local subPanel2 = GUI:Layout_Create(parent, "sub_panel2", 200, 250, 50, 150, false)
GUI:setVisible(subPanel2, false) -- 初始隐藏
GUI:setTouchEnabled(subPanel2, true)
-- 创建第一个主按钮的三个子按钮
local subBtn1_1 = GUI:Button_Create(subPanel1, "sub_btn1_1", 0, 120, "res/public_win32/1900000612.png")
GUI:Button_setTitleText(subBtn1_1, "子按钮1-1")
GUI:setAnchorPoint(subBtn1_1, 0.5, 0.5)
GUI:setTouchEnabled(subBtn1_1, true)
local subBtn1_2 = GUI:Button_Create(subPanel1, "sub_btn1_2", 0, 80, "res/public_win32/1900000612.png")
GUI:Button_setTitleText(subBtn1_2, "子按钮1-2")
GUI:setAnchorPoint(subBtn1_2, 0.5, 0.5)
GUI:setTouchEnabled(subBtn1_2, true)
local subBtn1_3 = GUI:Button_Create(subPanel1, "sub_btn1_3", 0, 40, "res/public_win32/1900000612.png")
GUI:Button_setTitleText(subBtn1_3, "子按钮1-3")
GUI:setAnchorPoint(subBtn1_3, 0.5, 0.5)
GUI:setTouchEnabled(subBtn1_3, true)
-- 创建第二个主按钮的三个子按钮
local subBtn2_1 = GUI:Button_Create(subPanel2, "sub_btn2_1", 0, 120, "res/public_win32/1900000612.png")
GUI:Button_setTitleText(subBtn2_1, "子按钮2-1")
GUI:setAnchorPoint(subBtn2_1, 0.5, 0.5)
GUI:setTouchEnabled(subBtn2_1, true)
local subBtn2_2 = GUI:Button_Create(subPanel2, "sub_btn2_2", 0, 80, "res/public_win32/1900000612.png")
GUI:Button_setTitleText(subBtn2_2, "子按钮2-2")
GUI:setAnchorPoint(subBtn2_2, 0.5, 0.5)
GUI:setTouchEnabled(subBtn2_2, true)
local subBtn2_3 = GUI:Button_Create(subPanel2, "sub_btn2_3", 0, 40, "res/public_win32/1900000612.png")
GUI:Button_setTitleText(subBtn2_3, "子按钮2-3")
GUI:setAnchorPoint(subBtn2_3, 0.5, 0.5)
GUI:setTouchEnabled(subBtn2_3, true)
-- 子按钮点击事件示例
GUI:addOnClickEvent(subBtn1_1, function()
SL:print("子按钮1-1被点击了！")
end)
GUI:addOnClickEvent(subBtn1_2, function()
SL:print("子按钮1-2被点击了！")
end)
GUI:addOnClickEvent(subBtn1_3, function()
SL:print("子按钮1-3被点击了！")
end)
GUI:addOnClickEvent(subBtn2_1, function()
SL:print("子按钮2-1被点击了！")
end)
GUI:addOnClickEvent(subBtn2_2, function()
SL:print("子按钮2-2被点击了！")
end)
GUI:addOnClickEvent(subBtn2_3, function()
SL:print("子按钮2-3被点击了！")
end)
-- 主按钮点击事件 - 控制伸缩
local isPanel1Visible = false
local isPanel2Visible = false
GUI:addOnClickEvent(mainBtn1, function()
isPanel1Visible = not isPanel1Visible
GUI:setVisible(subPanel1, isPanel1Visible)
-- 添加伸缩动画效果
if isPanel1Visible then
GUI:runAction(subPanel1, GUI:ActionSequence(
GUI:ActionScaleTo(0.1, 1.2),
GUI:ActionScaleTo(0.1, 1)
))
end
end)
GUI:addOnClickEvent(mainBtn2, function()
isPanel2Visible = not isPanel2Visible
GUI:setVisible(subPanel2, isPanel2Visible)
-- 添加伸缩动画效果
if isPanel2Visible then
GUI:runAction(subPanel2, GUI:ActionSequence(
GUI:ActionScaleTo(0.1, 1.2),
GUI:ActionScaleTo(0.1, 1)
))
end
end)
-- 添加背景
local bgImage = GUI:Image_Create(parent, "bg_image", 0, 0, "res/public_win32/1900000610.png")
GUI:setAnchorPoint(bgImage, 0, 0)
GUI:setLocalZOrder(bgImage, -1) -- 将背景放在最底层
SL:print("伸缩按钮界面创建完成！")
```
这个界面实现了以下功能：
1. **两个主按钮**：分别位于(100,300)和(200,300)位置
2. **六个子按钮**：每个主按钮下有三个子按钮
3. **伸缩功能**：点击主按钮时，对应的子按钮面板会显示/隐藏
4. **动画效果**：子面板显示时有缩放动画
5. **背景图片**：使用你指定的背景图片
6. **点击事件**：每个子按钮都有点击事件，会打印对应的信息
**使用说明**：
- 点击"主按钮1"会显示/隐藏下面的三个子按钮
- 点击"主按钮2"会显示/隐藏下面的三个子按钮
- 子按钮被点击时会在控制台输出信息
你可以根据需要调整按钮的位置、大小和图片资源。
← 返回问答库