前端用什么记录按钮的点击状态呢
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-03-21 18:35:55 |
👁️ 阅读: 15
在996引擎中，前端记录按钮点击状态主要有以下几种方式：
## 1. 使用按钮自身的状态属性
按钮本身有正常、按下、禁用三种状态，可以通过设置不同状态的图片来直观显示：
```lua
local button = GUI:Button_Create(parent, "btn_test", 100, 100, "res/public/1900000612.png")
GUI:Button_loadTexturePressed(button, "res/buff/1900000511.png") -- 按下状态图片
GUI:Button_loadTextureDisabled(button, "res/buff/1900000510.png") -- 禁用状态图片
```
## 2. 使用自定义变量记录状态
可以在按钮对象上添加自定义字段来记录点击状态：
```lua
local button = GUI:Button_Create(parent, "btn_test", 100, 100, "res/public/1900000612.png")
button._isClicked = false -- 自定义字段记录点击状态
GUI:addOnClickEvent(button, function()
button._isClicked = not button._isClicked
if button._isClicked then
SL:print("按钮被点击，当前状态：已选中")
-- 可以在这里改变按钮样式
else
SL:print("按钮被点击，当前状态：未选中")
end
end)
```
## 3. 使用SL:SetMetaValue/GetMetaValue存储状态
如果需要在多个地方访问按钮状态，可以使用元数据存储：
```lua
local button = GUI:Button_Create(parent, "btn_test", 100, 100, "res/public/1900000612.png")
GUI:addOnClickEvent(button, function()
local currentState = SL:GetMetaValue("BUTTON_TEST_STATE", false)
local newState = not currentState
SL:SetMetaValue("BUTTON_TEST_STATE", newState)
if newState then
GUI:Button_setTitleText(button, "已选中")
GUI:Button_setTitleColor(button, "#ff0000")
else
GUI:Button_setTitleText(button, "未选中")
GUI:Button_setTitleColor(button, "#ffffff")
end
end)
```
## 4. 使用按钮组模式（单选按钮效果）
如果需要实现单选按钮效果，可以创建按钮组：
```lua
local buttonGroup = {}
local selectedButton = nil
-- 创建多个按钮
for i = 1, 3 do
local btn = GUI:Button_Create(parent, "btn_"..i, 100, 100 + i*50, "res/public/1900000612.png")
btn._index = i
table.insert(buttonGroup, btn)
GUI:addOnClickEvent(btn, function()
-- 取消之前选中的按钮
if selectedButton then
GUI:Button_setTitleText(selectedButton, "未选中")
GUI:Button_setTitleColor(selectedButton, "#ffffff")
end
-- 设置当前选中的按钮
selectedButton = btn
GUI:Button_setTitleText(btn, "已选中")
GUI:Button_setTitleColor(btn, "#ff0000")
SL:print("选中按钮：" .. i)
end)
end
```
## 5. 结合状态图片和文字
最佳实践是结合状态图片和文字来明确显示按钮状态：
```lua
local button = GUI:Button_Create(parent, "btn_toggle", 100, 100, "res/buff/1900000510.png")
button._state = "off"
GUI:addOnClickEvent(button, function()
if button._state == "off" then
button._state = "on"
GUI:Button_loadTextureNormal(button, "res/buff/1900000511.png") -- 开启状态图片
GUI:Button_setTitleText(button, "开启")
else
button._state = "off"
GUI:Button_loadTextureNormal(button, "res/buff/1900000510.png") -- 关闭状态图片
GUI:Button_setTitleText(button, "关闭")
end
end)
```
**建议**：对于简单的点击状态记录，使用自定义字段（如 `button._isClicked`）最方便；如果需要跨函数或跨脚本访问状态，使用 `SL:SetMetaValue/GetMetaValue` 更合适。记得在点击事件中更新状态并同步更新UI显示。
← 返回问答库