如何创建多行多列容器
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-06-28 01:27:42 |
👁️ 阅读: 0
根据浮生梦老师前端课程内容，创建多行多列容器主要使用 `GUI:TableView_Create` 函数。这个函数可以创建网格布局的容器，非常适合展示多行多列的项目。
下面是创建表格视图（TableView）的详细步骤和代码示例：
```lua
-- 1. 首先创建一个父窗口或父节点
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 2. 创建TableView多行多列容器
-- 参数说明：
-- parent: 父节点对象
-- ID: 唯一ID
-- x, y: 位置坐标
-- width, height: 容器的宽度和高度
-- direction: 滚动方向（1：垂直；2：水平）
-- cellWid, cellHei: 每个单元格的宽度和高度
-- num: 需要创建的单元格数量
local tableView = GUI:TableView_Create(
parent, -- 父节点
"my_table", -- 唯一ID
100, -- x坐标
100, -- y坐标
400, -- 宽度
300, -- 高度
1, -- 方向：1垂直滚动
80, -- 单元格宽度
60, -- 单元格高度
20 -- 单元格总数
)
-- 3. 设置每个单元格的内容（通过回调函数）
local function createCell(index)
-- 创建每个单元格的Widget
local cellWidget = GUI:Widget_Create(tableView, "cell_"..index, 0, 0, 80, 60)
-- 在单元格中添加内容，比如一个图片
local cellBg = GUI:Image_Create(cellWidget, "bg", 40, 30, "res/public/1900000610.png")
GUI:setAnchorPoint(cellBg, 0.5, 0.5)
-- 添加文字显示索引
local text = GUI:Text_Create(cellWidget, "text", 40, 30, 16, "#ffffff", "格子"..index)
GUI:setAnchorPoint(text, 0.5, 0.5)
GUI:Text_setFontName(text, "fonts/font5.ttf")
-- 添加点击事件
GUI:addOnClickEvent(cellWidget, function()
SL:print("点击了第"..index.."个格子")
end)
return cellWidget
end
-- 4. 为TableView设置单元格创建回调
-- 注意：这个函数在知识库中没有直接找到，需要根据实际需求实现
-- 通常TableView会通过其他方式管理单元格，比如使用QuickCell
```
**重要说明：**
1. `TableView_Create` 创建的是网格布局容器，适合展示多行多列的数据
2. 单元格数量 `num` 决定了总共有多少个格子
3. 通过 `cellWid` 和 `cellHei` 控制每个格子的大小
4. 容器会自动根据方向（垂直或水平）进行滚动
**另一种实现方式：**
如果你需要更灵活的单元格管理，可以使用 `GUI:QuickCell_Create`：
```lua
-- 创建快速单元格容器
local quickCell = GUI:QuickCell_Create(
parent, -- 父节点
"quick_cell", -- 唯一ID
100, -- x坐标
100, -- y坐标
400, -- 宽度
300, -- 高度
function(index) -- 创建单元格的回调函数
local cell = GUI:Widget_Create(nil, "cell_"..index, 0, 0, 80, 60)
-- 添加单元格内容...
return cell
end,
function(index) -- 激活判断回调（可选）
return true -- 所有单元格都激活
end
)
```
**使用建议：**
- 对于固定行列的网格布局，使用 `TableView_Create`
- 对于动态加载的列表数据，使用 `QuickCell_Create` 更高效
- 记得设置容器的锚点和位置，确保正确显示
如果你需要创建具体的行列数（比如5行6列），可以这样计算：
- 总格子数 = 行数 × 列数
- 容器高度 ≈ 行数 × 单元格高度
- 容器宽度 ≈ 列数 × 单元格宽度
这样就能创建出规整的多行多列容器了！
← 返回问答库