怎么 给 SL GUIL 库 新增封装
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-03-25 20:49:47 |
👁️ 阅读: 4
要扩展SL GUI库的功能，你可以通过创建自定义函数来封装常用的操作。根据浮生梦老师的前端课程内容，这里有几个关键步骤：
## 1. 先创建基础界面框架
```lua
-- 创建父窗口作为容器
local parent = GUI:Win_Create("CustomUILib", 0, 0, 0, 0, false, false, true, false, false, false, 1)
```
## 2. 封装常用组件创建函数
```lua
-- 自定义：创建带样式的按钮
function GUI:CreateStyledButton(parent, id, x, y, text, imagePath)
local btn = GUI:Button_Create(parent, id, x, y, imagePath or "res/public/1900000612.png")
GUI:Button_setTitleText(btn, text or "按钮")
GUI:Button_setTitleFontSize(btn, 16)
GUI:setAnchorPoint(btn, 0.5, 0.5)
GUI:setContentSize(btn, 97, 36)
return btn
end
-- 自定义：创建带样式的文本
function GUI:CreateStyledText(parent, id, x, y, text, fontSize, color)
local textWidget = GUI:Text_Create(parent, id, x, y, fontSize or 16, color or "#ffffff", text or "")
GUI:setAnchorPoint(textWidget, 0.5, 0.5)
GUI:setIgnoreContentAdaptWithSize(textWidget, true)
return textWidget
end
-- 自定义：创建带背景的面板
function GUI:CreatePanel(parent, id, x, y, width, height, bgColor)
local panel = GUI:Layout_Create(parent, id, x, y, width, height, false)
GUI:Layout_setBackGroundColor(panel, bgColor or "#ffffff")
GUI:Layout_setBackGroundColorOpacity(panel, 255)
GUI:setTouchEnabled(panel, true)
return panel
end
```
## 3. 封装动画效果函数
```lua
-- 自定义：按钮点击动画效果
function GUI:AddButtonClickEffect(button)
GUI:addOnClickEvent(button, function()
-- 缩放动画
GUI:runAction(button, GUI:ActionSequence(
GUI:ActionScaleTo(0.1, 1.2),
GUI:ActionScaleTo(0.1, 1.0)
))
end)
end
-- 自定义：淡入淡出效果
function GUI:FadeInOut(widget, fadeInTime, fadeOutTime, delay)
GUI:setOpacity(widget, 0)
GUI:runAction(widget, GUI:ActionSequence(
GUI:ActionFadeTo(fadeInTime or 0.5, 255),
GUI:DelayTime(delay or 1.0),
GUI:ActionFadeTo(fadeOutTime or 0.5, 0)
))
end
```
## 4. 封装布局管理函数
```lua
-- 自定义：垂直排列组件
function GUI:ArrangeVertically(parent, widgets, spacing)
local currentY = 0
for _, widget in ipairs(widgets) do
local pos = GUI:getPosition(widget)
GUI:setPosition(widget, pos.x, currentY)
local size = GUI:getContentSize(widget)
currentY = currentY + size.height + (spacing or 10)
end
end
-- 自定义：居中显示组件
function GUI:CenterWidget(widget, parent)
if GUI:Win_IsNull(parent) then
return
end
local parentSize = GUI:getContentSize(parent)
local widgetSize = GUI:getContentSize(widget)
local x = (parentSize.width - widgetSize.width) / 2
local y = (parentSize.height - widgetSize.height) / 2
GUI:setPosition(widget, x, y)
end
```
## 5. 使用示例
```lua
-- 使用自定义库创建界面
local mainWindow = GUI:Win_Create("TestWindow", 0, 0, 800, 600, false, false, true, false, false, false, 1)
-- 创建面板
local panel = GUI:CreatePanel(mainWindow, "main_panel", 100, 100, 600, 400, "#333333")
-- 创建按钮
local btn1 = GUI:CreateStyledButton(panel, "btn1", 0, 0, "按钮1")
GUI:AddButtonClickEffect(btn1)
-- 创建文本
local text1 = GUI:CreateStyledText(panel, "text1", 0, 50, "欢迎使用自定义UI库", 20, "#ff0000")
-- 居中显示
GUI:CenterWidget(panel, mainWindow)
-- 添加点击事件
GUI:addOnClickEvent(btn1, function()
SL:print("自定义按钮被点击！")
-- 执行动画效果
GUI:FadeInOut(text1, 0.3, 0.3, 1.0)
end)
```
## 6. 封装成模块
```lua
-- 保存为 CustomUILib.lua
local CustomUILib = {}
-- 所有自定义函数放在这里
CustomUILib.CreateStyledButton = GUI.CreateStyledButton
CustomUILib.CreateStyledText = GUI.CreateStyledText
CustomUILib.CreatePanel = GUI.CreatePanel
CustomUILib.AddButtonClickEffect = GUI.AddButtonClickEffect
CustomUILib.FadeInOut = GUI.FadeInOut
CustomUILib.ArrangeVertically = GUI.ArrangeVertically
CustomUILib.CenterWidget = GUI.CenterWidget
return CustomUILib
```
**注意**：以上`GUI:CreateStyledButton`、`GUI:CreateStyledText`等函数是我根据996引擎现有函数封装的自定义函数，不是引擎自带的。使用时需要先定义这些函数，或者将它们放在单独的模块文件中导入使用。
这样封装的好处是：
1. 代码复用性高
2. 维护方便
3. 界面风格统一
4. 减少重复代码
记得在正式使用前充分测试这些自定义函数，确保它们能正常工作！
← 返回问答库