帮我写一个获取当前背包数据后创建一个列表容器,列表容器内放上item_show,点击该item_show后可产生勾选效果,在这个函数的参数需要一个可以选择一行内有几个item_shou,然后还需要一个参数就是他一个有多少item_show
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-06-28 01:01:31 |
👁️ 阅读: 0
根据浮生梦老师前端课程内容，我来帮你创建一个背包列表容器功能。这个函数会获取背包数据，创建列表容器，并实现点击勾选效果。
```lua
-- 创建背包列表容器函数
-- @param parent: 父节点
-- @param itemsPerRow: 每行显示几个item_show
-- @param totalItems: 总共需要多少个item_show
-- @param bagData: 背包数据（从服务端获取）
function createBagListContainer(parent, itemsPerRow, totalItems, bagData)
-- 参数检查
if GUI:Win_IsNull(parent) then
SL:print("错误：父节点为空")
return
end
if not itemsPerRow or itemsPerRow <= 0 then
itemsPerRow = 5 -- 默认每行5个
end
if not totalItems or totalItems <= 0 then
totalItems = 30 -- 默认30个
end
-- 计算需要的行数
local rows = math.ceil(totalItems / itemsPerRow)
-- 创建列表容器
local listView = GUI:ListView_Create(parent, "listView_bag", 0, 0, 400, 300)
-- 设置列表容器属性
GUI:ListView_setDirection(listView, 0) -- 垂直方向
GUI:ListView_setItemsMargin(listView, 5) -- 项间距
-- 存储选中状态
local selectedItems = {}
-- 创建item_show模板
local function createItemShow(index, itemData)
-- 创建item容器
local itemContainer = GUI:Widget_Create(nil, "item_" .. index, 0, 0, 80, 80)
-- 创建背景
local bg = GUI:Image_Create(itemContainer, "bg", 0, 0, "res/public/1900000610.png")
GUI:setAnchorPoint(bg, 0.5, 0.5)
GUI:setPosition(bg, 40, 40)
-- 创建物品图标
local iconPath = itemData and itemData.icon or "res/public/1900000612.png"
local icon = GUI:Image_Create(itemContainer, "icon", 0, 0, iconPath)
GUI:setAnchorPoint(icon, 0.5, 0.5)
GUI:setPosition(icon, 40, 40)
GUI:setScale(icon, 0.8, 0.8)
-- 创建物品数量文本
local count = itemData and itemData.count or 0
local textCount = GUI:Text_Create(itemContainer, "text_count", 60, 10, 14, "#ffffff", tostring(count))
GUI:Text_setFontName(textCount, "fonts/font5.ttf")
-- 创建选中勾选框（默认隐藏）
local selectBox = GUI:Image_Create(itemContainer, "select_box", 60, 60, "res/public/1900000612.png")
GUI:setVisible(selectBox, false)
GUI:setAnchorPoint(selectBox, 0.5, 0.5)
GUI:setScale(selectBox, 0.5, 0.5)
-- 添加点击事件
GUI:addOnClickEvent(itemContainer, function()
-- 切换选中状态
selectedItems[index] = not selectedItems[index]
-- 显示/隐藏勾选框
GUI:setVisible(selectBox, selectedItems[index])
-- 添加选中动画效果
if selectedItems[index] then
GUI:runAction(icon, GUI:ActionSequence(
GUI:ActionScaleTo(0.1, 0.9),
GUI:ActionScaleTo(0.1, 0.8)
))
SL:print("选中了第" .. index .. "个物品")
else
SL:print("取消选中第" .. index .. "个物品")
end
end)
return itemContainer
end
-- 创建行容器函数
local function createRowContainer(rowIndex)
local rowContainer = GUI:Widget_Create(nil, "row_" .. rowIndex, 0, 0, 400, 80)
-- 计算当前行起始和结束索引
local startIndex = (rowIndex - 1) * itemsPerRow + 1
local endIndex = math.min(rowIndex * itemsPerRow, totalItems)
-- 创建该行的所有item_show
for i = startIndex, endIndex do
local itemData = bagData and bagData[i] or nil
local item = createItemShow(i, itemData)
-- 计算位置
local colIndex = (i - startIndex)
local xPos = colIndex * 85 + 40 -- 80宽 + 5间距
GUI:setPosition(item, xPos, 40)
GUI:Widget_AddChild(rowContainer, item)
end
return rowContainer
end
-- 创建所有行并添加到列表容器
for row = 1, rows do
local rowContainer = createRowContainer(row)
GUI:ListView_pushBackCustomItem(listView, rowContainer)
end
-- 返回列表容器和选中状态表
return {
listView = listView,
selectedItems = selectedItems,
getSelectedCount = function()
local count = 0
for _, selected in pairs(selectedItems) do
if selected then count = count + 1 end
end
return count
end,
getSelectedIndices = function()
local indices = {}
for index, selected in pairs(selectedItems) do
if selected then table.insert(indices, index) end
end
return indices
end,
clearSelection = function()
selectedItems = {}
-- 遍历所有item隐藏勾选框
for i = 1, totalItems do
local rowIndex = math.ceil(i / itemsPerRow)
local rowItem = GUI:ListView_getItem(listView, rowIndex)
if not GUI:Win_IsNull(rowItem) then
local item = GUI:getChildByName(rowItem, "item_" .. i)
if not GUI:Win_IsNull(item) then
local selectBox = GUI:getChildByName(item, "select_box")
GUI:setVisible(selectBox, false)
end
end
end
end
}
end
-- 使用示例：
function exampleUsage()
-- 创建父节点
local parent = GUI:Win_Create("BagMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 模拟从服务端获取背包数据
local bagData = {}
for i = 1, 30 do
bagData[i] = {
icon = "res/public/1900000612.png",
count = math.random(1, 99),
itemId = 1000 + i
}
end
-- 创建背包列表容器
-- 参数说明：
-- parent: 父节点
-- 5: 每行显示5个item
-- 30: 总共30个item
-- bagData: 背包数据
local bagContainer = createBagListContainer(parent, 5, 30, bagData)
-- 获取选中数量
SL:ScheduleOnce(function()
local selectedCount = bagContainer.getSelectedCount()
SL:print("当前选中数量：" .. selectedCount)
-- 获取选中索引
local selectedIndices = bagContainer.getSelectedIndices()
for _, index in ipairs(selectedIndices) do
SL:print("选中了第" .. index .. "个物品")
end
-- 清空选中
-- bagContainer.clearSelection()
end, 3) -- 3秒后执行
end
```
这个函数的主要特点：
1. **参数灵活**：
- `itemsPerRow`：控制每行显示几个item
- `totalItems`：控制总共显示多少个item
- `bagData`：背包物品数据
2. **功能完整**：
- 自动计算行数和布局
- 点击item会有勾选效果和动画
- 支持多选
- 提供选中状态查询和清空功能
3. **交互体验**：
- 点击时有缩放动画反馈
- 勾选框清晰可见
- 支持批量操作
4. **扩展性强**：
- 可以轻松修改item样式
- 支持不同分辨率的适配
- 可以添加更多交互功能
使用时只需要调用`createBagListContainer`函数，传入相应的参数即可。函数会返回一个包含列表容器和各种操作方法的对象，方便后续操作。
← 返回问答库