UI大小屏自适应示例 ​

-- 引入 UI 构建库。
local ui = require("ui_builder")

-- 准备下拉框选项。
-- key 是最终取到的值，label 是界面显示文字。
local modeItems = {
    -- 选项1：界面显示“自动”，实际值是 auto。
    { key = "auto", label = "自动" },
    -- 选项2：界面显示“手动”，实际值是 manual。
    { key = "manual", label = "手动" },
}

-- 创建任务输入框。
-- 参数1 "task"：取值名，对应 values.task。
-- 参数2 "任务"：标题。
-- 参数3 "请输入"：占位提示。
-- 参数4 "测试任务"：默认值。
local task = ui.createInput("task", "任务", "请输入", "测试任务")
-- 响应式宽度：小屏半行，大屏四分之一行。
task.Input.layout = { span = 6, lg = 3 }

-- 创建模式下拉框。
-- 参数1 "mode"：取值名，对应 values.mode。
-- 参数2 "auto"：默认选中的 key。
-- 参数3 "模式"：标题。
-- 参数4 modeItems：选项数组。
local mode = ui.createSelect("mode", "auto", "模式", modeItems)
-- 下拉框是短控件，使用同样的响应式宽度。
mode.Select.layout = { span = 6, lg = 3 }

-- 创建延迟数字输入。
-- 参数1 "delay"：取值名。
-- 参数2 10：默认值。
-- 参数3 "延迟"：标题。
-- 参数4 0：最小值。
-- 参数5 1000：最大值。
-- 参数6 10：步进。
-- 参数7 "ms"：占位提示。
local delay = ui.createNumberInput("delay", 10, "延迟", 0, 1000, 10, "ms")
-- 数字框是短控件，使用小屏两列、大屏四列。
delay.NumberInput.layout = { span = 6, lg = 3 }

-- 创建调试开关。
local debug = {
    Switch = {
        -- 取值名，对应 values.debug。
        name = "debug",
        -- 开关显示文字。
        title = "调试",
        -- 默认关闭。
        isSelected = false,
        -- 开关比较短，也使用响应式短控件宽度。
        layout = { span = 6, lg = 3 },
    }
}

-- 创建速度滑块。
-- 滑块如果太窄会不好拖动，所以不使用 lg=3。
local speed = ui.createSlider("speed", 50, "运行速度", 0, 100, 1)
-- span=12 表示永远占满一整行。
speed.Slider.layout = { span = 12 }

-- 构建 UI。
ui.buildUI({
    {
        Group = {
            -- 分组标题。
            title = "响应式布局",
            -- 分组说明。
            description = "span=6 表示小屏两列，lg=3 表示大屏四列。",
            -- 使用栅格布局。
            direction = "grid",
            -- 一行 12 格。
            columns = 12,
            -- 组件间距。
            gap = 4,
            -- 每一组大括号表示一行，但组件会根据 layout 自动换行。
            item = {
                -- 四个短组件：小屏显示为两行，大屏可显示为一行。
                { task, mode, delay, debug },
                -- 滑块整行显示。
                { speed },
            },
        }
    }
}, 1)

-- 显示 UI。
StartUI()

-- 打印当前 UI 值。
function onUIChanged(values)
    print("task =", values.task)
    print("mode =", values.mode)
    print("delay =", values.delay)
    print("debug =", values.debug)
    print("speed =", values.speed)
end