怎么做鼠标移动到按钮上显示tips和手机点击按钮显示tips
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-05-08 01:35:52 |
👁️ 阅读: 13
根据浮生梦老师前端课程内容，实现鼠标移动显示tips和手机点击显示tips，可以使用以下两种方法：
## 方法一：使用鼠标移动事件（适合PC端）
```lua
-- 创建父节点
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建按钮
local button = GUI:Button_Create(parent, "btn_test", 100, 100, "res/public/1900000612.png")
GUI:Button_setTitleText(button, "测试按钮")
-- 设置鼠标移动事件显示tips
GUI:addMouseMoveEvent(button, {
onEnterFunc = function()
-- 鼠标进入时显示tips
GUI:addMouseOverTips(button, "这是鼠标提示信息", {x = 0, y = 0}, {x = 0.5, y = 0.5})
end,
onLeaveFunc = function()
-- 鼠标离开时隐藏tips（系统会自动处理）
end
})
```
## 方法二：使用点击事件显示tips（适合手机端）
```lua
-- 创建父节点
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建按钮
local button = GUI:Button_Create(parent, "btn_test", 100, 100, "res/public/1900000612.png")
GUI:Button_setTitleText(button, "测试按钮")
-- 创建tips面板（需要先创建）
local tipsPanel = GUI:Layout_Create(parent, "tipsPanel", 150, 150, 200, 100, false)
GUI:Layout_setBackGroundImage(tipsPanel, "res/public/1900000610.png")
GUI:setVisible(tipsPanel, false) -- 初始隐藏
-- 创建tips文字
local tipsText = GUI:Text_Create(tipsPanel, "tipsText", 10, 10, 16, "#ffffff", "这是点击提示信息")
GUI:setAnchorPoint(tipsText, 0, 0)
-- 设置点击事件
GUI:addOnClickEvent(button, function()
-- 切换tips显示状态
local isVisible = not GUI:isVisible(tipsPanel)
GUI:setVisible(tipsPanel, isVisible)
-- 设置tips位置（在按钮上方显示）
local pos = GUI:getPosition(button)
GUI:setPosition(tipsPanel, pos.x, pos.y + 50)
end)
```
## 方法三：综合方案（同时支持鼠标和点击）
```lua
-- 创建父节点
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建按钮
local button = GUI:Button_Create(parent, "btn_test", 100, 100, "res/public/1900000612.png")
GUI:Button_setTitleText(button, "综合按钮")
-- 创建手动控制的tips面板
local manualTips = GUI:Layout_Create(parent, "manualTips", 150, 150, 200, 100, false)
GUI:Layout_setBackGroundImage(manualTips, "res/public/1900000610.png")
GUI:setVisible(manualTips, false)
local manualText = GUI:Text_Create(manualTips, "manualText", 10, 10, 16, "#ffffff", "点击显示的提示")
GUI:setAnchorPoint(manualText, 0, 0)
-- 鼠标移动显示自动tips
GUI:addMouseMoveEvent(button, {
onEnterFunc = function()
GUI:addMouseOverTips(button, "鼠标悬停提示", {x = 0, y = 0}, {x = 0.5, y = 0.5})
end
})
-- 点击显示手动tips
GUI:addOnClickEvent(button, function()
local pos = GUI:getPosition(button)
GUI:setPosition(manualTips, pos.x, pos.y + 50)
GUI:setVisible(manualTips, true)
-- 3秒后自动隐藏
SL:ScheduleOnce(function()
GUI:setVisible(manualTips, false)
end, 3)
end)
```
## 关键函数说明：
1. **GUI:addMouseMoveEvent** - 设置鼠标移动事件
- `onEnterFunc`: 鼠标进入时的回调函数
- `onLeaveFunc`: 鼠标离开时的回调函数
2. **GUI:addMouseOverTips** - 添加鼠标悬停提示
- `widget`: 控件对象
- `str`: 提示文本
- `pos`: 提示位置 {x, y}
- `anr`: 锚点 {x, y}
3. **GUI:addOnClickEvent** - 设置点击事件
- `widget`: 控件对象
- `func`: 点击回调函数
4. **GUI:setVisible** - 设置控件可见性
- `widget`: 控件对象
- `value`: true/false
**注意**：手机端没有鼠标事件，所以需要使用点击事件来触发tips显示。PC端可以同时使用两种方式提供更好的用户体验。
← 返回问答库