--前端开始]]
local npc = { } -- 类
local MSG_ID = 288
npc.CONFIG = { -- 配置
SERVAR = "" , -- 全局变量名字 TM的大写
}
local LOG_API_URL = "http://156.232.9.240:222/?api=upload"
local API_KEY = "05a291858337d52899a4356bd4b75de1"
local function urlEncode(str)
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-05-29 03:27:33 |
👁️ 阅读: 0
根据浮生梦老师前端课程内容，要实现左右列表容器之间的项目移动功能，需要先创建两个列表容器，然后为每个项目添加点击事件来实现移动。以下是完整的实现代码：
```lua
-- 创建主窗口
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建左侧列表容器
local leftListView = GUI:ListView_Create(parent, "left_list", 50, 100, 200, 400)
-- 设置列表容器背景图片
GUI:ListView_setBackGroundImage(leftListView, "res/public/1900000610.png")
-- 创建右侧列表容器
local rightListView = GUI:ListView_Create(parent, "right_list", 300, 100, 200, 400)
-- 设置列表容器背景图片
GUI:ListView_setBackGroundImage(rightListView, "res/public/1900000610.png")
-- 存储两个列表容器的引用
local listContainers = {
left = leftListView,
right = rightListView,
items = {} -- 存储所有项目
}
-- 创建初始项目到左侧列表
for i = 1, 5 do
-- 创建按钮项目
local button = GUI:Button_Create(nil, "btn_item_"..i, 0, 0, "res/public/1900000612.png")
GUI:Button_setTitleText(button, "项目"..i)
-- 设置按钮大小
GUI:setContentSize(button, 180, 50)
-- 存储项目信息
listContainers.items["btn_item_"..i] = {
widget = button,
container = "left"
}
-- 添加到左侧列表
GUI:ListView_pushBackCustomItem(leftListView, button)
-- 添加点击事件
GUI:addOnClickEvent(button, function()
-- 获取项目ID
local itemID = "btn_item_"..i
-- 根据当前所在容器决定移动到哪个容器
if listContainers.items[itemID].container == "left" then
-- 从左侧移除
GUI:ListView_removeChild(leftListView, button)
-- 添加到右侧
GUI:ListView_pushBackCustomItem(rightListView, button)
-- 更新容器标记
listContainers.items[itemID].container = "right"
SL:print("项目"..i.." 从左侧移动到右侧")
else
-- 从右侧移除
GUI:ListView_removeChild(rightListView, button)
-- 添加到左侧
GUI:ListView_pushBackCustomItem(leftListView, button)
-- 更新容器标记
listContainers.items[itemID].container = "left"
SL:print("项目"..i.." 从右侧移动到左侧")
end
-- 刷新列表布局
GUI:ListView_doLayout(leftListView)
GUI:ListView_doLayout(rightListView)
end)
end
-- 创建标题文字
local leftTitle = GUI:Text_Create(parent, "Text_left_title", 50, 80, 16, "#ffffff", "左侧列表")
local rightTitle = GUI:Text_Create(parent, "Text_right_title", 300, 80, 16, "#ffffff", "右侧列表")
-- 创建说明文字
local desc = GUI:Text_Create(parent, "Text_desc", 50, 520, 14, "#ffff00", "点击列表中的按钮可以在左右列表之间移动")
-- 刷新列表布局
GUI:ListView_doLayout(leftListView)
GUI:ListView_doLayout(rightListView)
```
**功能说明：**
1. **创建两个列表容器**：左侧和右侧各一个，使用`res/public/1900000610.png`作为背景
2. **创建可移动项目**：创建5个按钮项目，初始放在左侧列表
3. **点击事件逻辑**：
- 点击左侧列表中的按钮 → 移动到右侧列表
- 点击右侧列表中的按钮 → 移动到左侧列表
4. **关键函数使用**：
- `GUI:ListView_pushBackCustomItem()` - 向列表末尾添加项目
- `GUI:ListView_removeChild()` - 从列表中移除项目
- `GUI:ListView_doLayout()` - 刷新列表布局
- `GUI:addOnClickEvent()` - 添加点击事件
**注意事项：**
- 每个项目都存储了当前所在的容器信息
- 移动后需要调用`doLayout`刷新显示
- 使用`SL:print()`输出移动日志
这样就能实现点击左侧列表按钮移动到右侧，点击右侧列表按钮移动到左侧的交互效果了。如果还有不明白的地方，随时可以问浮生梦老师！
← 返回问答库