alg阿灵戈社区»论坛 › lua学习 › 新手上路 › Lua开发：实现自定义选择列表UI组件

0 收听	1 听众	134 主题

Lua开发：实现自定义选择列表UI组件

IP属地：浙江省杭州市

发表于昨天 20:54 | 查看: 5| 回复: 0

Lua开发：实现自定义选择列表UI组件

在游戏开发中，创建灵活、可复用的UI组件是提高开发效率的关键。今天我将分享一个Lua实现的通用选择列表组件 CommonSelectList，它可以在游戏中动态创建选项菜单。

组件概述

CommonSelectList是一个功能强大的自定义选择列表组件，主要特点包括：

动态位置调整（自动适应屏幕边缘）
可自定义的单元格大小
支持文本和图标显示
最大显示数量限制
点击回调处理

核心代码分析

1. 组件初始化

CommonSelectList = {}
CommonSelectList._maxShowNum = 8  -- 最大显示cell个数

function CommonSelectList.main(data)
    local parent = GUI:Attach_Parent()
    GUI:LoadExport(parent, "common_tips/common_select_list")

    -- 获取屏幕尺寸
    local screenW = SL:GetMetaValue("SCREEN_WIDTH")
    local screenH = SL:GetMetaValue("SCREEN_HEIGHT")

    CommonSelectList._ui = GUI:ui_delegate(parent)
    -- 设置取消面板为全屏大小
    GUI:setContentSize(CommonSelectList._ui.Panel_cancel, screenW, screenH)

    CommonSelectList.InitUI(data)
end

2. UI初始化与布局

function CommonSelectList.InitUI(data)
    if not data then return end

    local position = data.position
    local values = data.values
    local cellSize = {width = 260, height = 28}  -- 默认cell尺寸
    local cellW = data.cellwidth or cellSize.width
    local cellH = data.cellheight or cellSize.height
    local MoveCount = data.MoveItemCount or 0

    -- 设置回调函数和图标路径
    CommonSelectList._func = data.func 
    CommonSelectList._iconPaths = data.iconPaths

    -- 处理单选项情况
    if type(values) == "string" then 
        values = {values}
    end 

    -- 计算实际显示数量
    local count = math.min(#values, CommonSelectList._maxShowNum)

    -- 自动调整位置（避免超出屏幕底部）
    if position.y < cellH * count then
        GUI:setAnchorPoint(CommonSelectList._ui.Image_bg, 0, 0) 
        if MoveCount > 0 then 
            position.y = position.y + MoveCount * cellH
        end
    end

    -- 计算背景高度
    local pSizeH = cellH * count + 8
    GUI:setContentSize(CommonSelectList._ui.Image_bg, cellW + 8, pSizeH)
    GUI:setContentSize(CommonSelectList._ui.ListView_1, cellW, cellH * count)
    GUI:setPositionY(CommonSelectList._ui.ListView_1, pSizeH - 4)

    -- 保存单元格尺寸
    CommonSelectList._cellSize = {width = cellW, height = cellH}

    -- 创建所有选项
    for i, v in ipairs(values) do
        local cell = CommonSelectList.CreateItemCell(i, v)
        GUI:ListView_pushBackCustomItem(CommonSelectList._ui.ListView_1, cell)
    end

    -- 设置背景位置
    GUI:setPosition(CommonSelectList._ui.Image_bg, position.x, position.y)

    -- 取消按钮点击事件
    GUI:addOnClickEvent(CommonSelectList._ui.Panel_cancel, function()
        if CommonSelectList._func then
            CommonSelectList._func(0)  -- 0表示取消选择
        end
        SL:CloseSelectListUI()
    end)
end

3. 创建单个选项单元格

function CommonSelectList.CreateItemCell(index, str)
    local parent = GUI:Widget_Create(CommonSelectList._ui.ListView_1, "widget", 0, 0)
    GUI:LoadExport(parent, "common_tips/common_select_list_cell")

    local size = CommonSelectList._cellSize
    local cell = GUI:getChildByName(parent, "Image_cell")
    GUI:setContentSize(cell, size)

    local ui = GUI:ui_delegate(cell)
    GUI:Text_setString(ui.Text_desc, str)
    GUI:setPosition(ui.Text_desc, size.width / 2, size.height / 2)

    -- 图标处理
    GUI:setVisible(ui.Image_icon, false)
    local iconPath = CommonSelectList._iconPaths and CommonSelectList._iconPaths[index]
    if iconPath and iconPath ~= "" and SL:IsFileExist(iconPath) then
        GUI:Image_loadTexture(ui.Image_icon, iconPath)
        GUI:setVisible(ui.Image_icon, true)
    end

    -- 单元格点击事件
    GUI:addOnClickEvent(cell, function()
        if CommonSelectList._func then
            CommonSelectList._func(index)  -- 传递选择的索引
        end
        SL:CloseSelectListUI()
    end)

    -- 清理临时节点
    GUI:removeFromParent(cell)
    GUI:removeFromParent(parent)

    return cell
end

使用示例

-- 创建选择列表
local data = {
    position = {x = 100, y = 200},  -- 显示位置
    values = {"攻击", "防御", "治疗", "逃跑"},  -- 选项列表
    iconPaths = {  -- 图标路径(可选)
        "icons/attack.png",
        "icons/defense.png",
        "icons/heal.png",
        "icons/escape.png"
    },
    cellwidth = 300,  -- 自定义宽度
    func = function(index)  -- 选择回调
        if index == 0 then
            print("取消选择")
        else
            print("选择了选项:", index)
        end
    end
}

CommonSelectList.main(data)

关键特性实现

智能位置调整：
- 检查列表是否会超出屏幕底部
- 自动调整锚点和位置
- 支持额外的位置偏移(MoveItemCount)

动态尺寸计算：

local pSizeH = cellH * count + 8
GUI:setContentSize(CommonSelectList._ui.Image_bg, cellW + 8, pSizeH)

图标显示处理：

if iconPath and iconPath ~= "" and SL:IsFileExist(iconPath) then
    GUI:Image_loadTexture(ui.Image_icon, iconPath)
    GUI:setVisible(ui.Image_icon, true)
end