-- 创建背包列表容器函数
---@param parent: 父节点
---@param bagData: 背包数据(从服务端获取)
---@param data: 背包数据表
---@param itemsPerRow: 每行显示几个item_show
---@param totalItems: 总共需要显示多少个item_show
---@param containerDirection: 容器方向 1:垂直 2:水平
---@param padding: 间距
---@param Lis
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-06-28 03:59:35 |
👁️ 阅读: 1
根据浮生梦老师前端课程内容,要实现外部修改item_layout控件的图片,你需要返回一个包含所有item_layout引用的表,或者通过ID来获取。以下是修改后的代码:
```lua
-- 创建背包列表容器函数
---@param parent: 父节点
---@param bagData: 背包数据(从服务端获取)
---@param itemsPerRow: 每行显示几个item_show
---@param totalItems: 总共需要显示多少个item_show
---@param containerDirection: 容器方向 1:垂直 2:水平
---@param padding: 间距
---@param ListView_x: 列表容器x坐标
---@param ListView_y: 列表容器y坐标
---@param itemWidth: item宽度
---@param itemHeight: item高度
---@return table: 返回所有item_layout控件的引用表
function item_show(parent, bagData, itemsPerRow, totalItems, containerDirection, padding, ListView_x, ListView_y,
itemWidth, itemHeight)
if GUI:Win_IsNull(parent) then
SL:print("错误:父节点为空")
return
end
if bagData == nil then
SL:print("错误:背包数据为空")
return
end
totalItems = totalItems or 20
totalItems = #bagData > totalItems and #bagData or totalItems
itemsPerRow = itemsPerRow or 2
containerDirection = containerDirection or 1
padding = padding or 1
itemWidth = itemWidth or 60
itemHeight = itemHeight or 60
local tick_imagePath = "res/public/1900000678_4.png" -- 勾选图片路径
local item_imgbg = "res/custom/LongMaiJueXing/60x60.png"
local startX = 20
ListView_x = ListView_x or 0
ListView_y = ListView_y or 0
local size = GUI:getContentSize(parent)
-- 创建列表容器(垂直滚动)
local listView = GUI:ListView_Create(parent, "ListView_Container", ListView_x, ListView_y, size.width, size.height, 1)
GUI:ListView_setBackGroundColorType(listView, 1)
GUI:ListView_setBackGroundColor(listView, "#FF0000")
GUI:ListView_setItemsMargin(listView, padding)
-- 存储所有item_layout的引用
local itemLayouts = {}
local function createItemBG(row)
-- 创建item背景框
local layout = GUI:Layout_Create(listView, "item_layout" .. row, 0, 0, 60, 60)
return layout
end
local function createItem_show(layout, col, x, y)
-- 创建item背景框
local itemBg = GUI:Image_Create(layout, "item_bg" .. col, x, y, item_imgbg)
return itemBg
end
for row = 1, math.ceil(totalItems / itemsPerRow) do
local layout = createItemBG(row)
for col = 1, itemsPerRow do
local index = (row - 1) * itemsPerRow + col
local x = startX + (col - 1) * (itemWidth + padding)
local y = 0
local itemBg = createItem_show(layout, col, x, y)
GUI:setPosition(itemBg, x, y)
end
local children = GUI:getChildren(layout)
local index = 1
for k, v in ipairs(children) do
if bagData[index] == nil then
break
end
local itemData = {
index = bagData[index].Index,
look = true,
bgVisible = false,
count = bagData[index].OverLap,
color = 255
}
local item = GUI:ItemShow_Create(v, "ItemShow_" .. index, 15, 15, itemData)
if item then
-- 创建可点击的layout层
local item_layout = GUI:Layout_Create(item, "item_clink" .. index, -15, -15, 60, 60)
GUI:Layout_setBackGroundImage(item_layout, tick_imagePath)
GUI:setTouchEnabled(item_layout, true)
GUI:setSwallowTouches(item_layout, false)
-- 存储引用
itemLayouts[index] = item_layout
GUI:addOnClickEvent(item_layout, function()
SL:Print("单击触发---" .. index)
end)
end
index = index + 1
end
end
-- 返回listView和itemLayouts表
return listView, itemLayouts
end
```
**使用示例:**
```lua
-- 创建背包列表
local listView, itemLayouts = item_show(parent, bagData, 4, 20, 1, 5, 0, 0, 60, 60)
-- 外部修改第3个item_layout的图片
if itemLayouts[3] then
GUI:Layout_setBackGroundImage(itemLayouts[3], "res/public/1900000610.png")
end
-- 修改第5个item_layout的图片
if itemLayouts[5] then
GUI:Layout_setBackGroundImage(itemLayouts[5], "res/public/1900000612.png")
end
```
**关键点说明:**
1. **返回引用表**:函数现在返回两个值 - `listView` 和 `itemLayouts` 表
2. **按索引存储**:`itemLayouts` 表以索引为键存储每个 `item_layout` 的引用
3. **外部访问**:通过 `itemLayouts[索引]` 可以获取到对应的 `item_layout` 控件
4. **修改图片**:使用 `GUI:Layout_setBackGroundImage(widget, imagePath)` 函数修改背景图片
这样你就可以在函数外部轻松修改任何 `item_layout` 的图片了。记得在使用前检查控件是否存在,避免空指针错误。
← 返回问答库