使用锚点 方法做到自适应
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-04-07 00:27:21 |
👁️ 阅读: 0
要实现自适应布局，锚点设置是关键。根据浮生梦老师前端课程内容，主要使用`GUI:setAnchorPoint()`函数来设置控件的锚点位置。
## 基本锚点设置方法
```lua
-- 创建父节点
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建背景图片
local bg = GUI:Image_Create(parent, "bg", 0, 0, "res/public/1900000610.png")
GUI:setAnchorPoint(bg, 0.5, 0.5) -- 中心锚点
-- 创建按钮
local btn = GUI:Button_Create(parent, "btn_test", 0, 0, "res/public/1900000612.png")
GUI:Button_setTitleText(btn, "自适应按钮")
GUI:setAnchorPoint(btn, 0.5, 0.5) -- 中心锚点
```
## 自适应布局示例
```lua
-- 获取屏幕尺寸
local screenW = SL:GetMetaValue("SCREEN_WIDTH")
local screenH = SL:GetMetaValue("SCREEN_HEIGHT")
-- 创建自适应背景
local bg = GUI:Image_Create(parent, "adaptive_bg", screenW/2, screenH/2, "res/public/1900000610.png")
GUI:setAnchorPoint(bg, 0.5, 0.5) -- 中心锚点，居中显示
-- 创建自适应按钮（右上角）
local btn_top_right = GUI:Button_Create(parent, "btn_tr", screenW-50, screenH-50, "res/public/1900000612.png")
GUI:setAnchorPoint(btn_top_right, 1, 1) -- 右上角锚点
-- 创建自适应按钮（左下角）
local btn_bottom_left = GUI:Button_Create(parent, "btn_bl", 50, 50, "res/public/1900000612.png")
GUI:setAnchorPoint(btn_bottom_left, 0, 0) -- 左下角锚点
-- 创建自适应按钮（底部居中）
local btn_bottom_center = GUI:Button_Create(parent, "btn_bc", screenW/2, 50, "res/public/1900000612.png")
GUI:setAnchorPoint(btn_bottom_center, 0.5, 0) -- 底部中心锚点
```
## 常见锚点位置
```lua
-- 左上角 (0, 1)
GUI:setAnchorPoint(widget, 0, 1)
-- 中心点 (0.5, 0.5)
GUI:setAnchorPoint(widget, 0.5, 0.5)
-- 右下角 (1, 0)
GUI:setAnchorPoint(widget, 1, 0)
-- 顶部中心 (0.5, 1)
GUI:setAnchorPoint(widget, 0.5, 1)
-- 右侧中心 (1, 0.5)
GUI:setAnchorPoint(widget, 1, 0.5)
```
## 结合屏幕适配的完整示例
```lua
-- 创建自适应界面
function createAdaptiveUI()
local parent = GUI:Win_Create("AdaptiveUI", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 获取屏幕尺寸
local screenW = SL:GetMetaValue("SCREEN_WIDTH")
local screenH = SL:GetMetaValue("SCREEN_HEIGHT")
-- 全屏背景
local fullBg = GUI:Image_Create(parent, "full_bg", screenW/2, screenH/2, "res/public/1900000610.png")
GUI:setAnchorPoint(fullBg, 0.5, 0.5)
GUI:setContentSize(fullBg, screenW, screenH)
-- 顶部标题
local title = GUI:Text_Create(parent, "title", screenW/2, screenH-50, 24, "#ffffff", "自适应界面")
GUI:setAnchorPoint(title, 0.5, 1)
GUI:Text_setFontName(title, "fonts/font5.ttf")
-- 底部按钮组
local btn1 = GUI:Button_Create(parent, "btn1", screenW/4, 100, "res/public/1900000612.png")
GUI:setAnchorPoint(btn1, 0.5, 0)
GUI:Button_setTitleText(btn1, "按钮1")
local btn2 = GUI:Button_Create(parent, "btn2", screenW/2, 100, "res/public/1900000612.png")
GUI:setAnchorPoint(btn2, 0.5, 0)
GUI:Button_setTitleText(btn2, "按钮2")
local btn3 = GUI:Button_Create(parent, "btn3", screenW*3/4, 100, "res/public/1900000612.png")
GUI:setAnchorPoint(btn3, 0.5, 0)
GUI:Button_setTitleText(btn3, "按钮3")
return parent
end
```
## 锚点使用技巧
1. **中心锚点(0.5,0.5)**：适合需要居中对齐的元素
2. **边角锚点(0,0)/(1,1)**：适合需要贴边对齐的元素
3. **组合使用**：不同锚点组合可以实现复杂的布局效果
4. **配合坐标计算**：结合屏幕尺寸计算坐标，实现真正的自适应
记住：锚点决定了控件的哪个点会固定在设置的位置上。比如设置锚点为(0.5,0.5)，那么控件的中心点就会在设置的坐标位置上。
← 返回问答库