UI基础表单示例 ​

-- 引入 UI 构建库，之后才能使用 ui.createInput、ui.createSlider 等函数。
local ui = require("ui_builder")

-- 创建文本输入框。
-- 参数1 "name"：取值名，之后用 values.name 或 UICurrentValue.name 读取。
-- 参数2 "名称"：界面上显示的标题。
-- 参数3 "请输入名称"：输入框为空时显示的提示文字。
-- 参数4 "默认名称"：默认值。
local name = ui.createInput("name", "名称", "请输入名称", "默认名称")
-- 设置输入框布局：span=6 表示小屏半行，lg=3 表示大屏四分之一行。
name.Input.layout = { span = 6, lg = 3 }

-- 创建数字输入框。
-- 参数1 "count"：取值名。
-- 参数2 1：默认值。
-- 参数3 "数量"：标题。
-- 参数4 0：最小值。
-- 参数5 100：最大值。
-- 参数6 1：每次增减的步进。
-- 参数7 "1~100"：占位提示。
local count = ui.createNumberInput("count", 1, "数量", 0, 100, 1, "1~100")
-- 数字输入框也是短控件，使用小屏两列、大屏四列。
count.NumberInput.layout = { span = 6, lg = 3 }

-- 创建开关组件。当前没有 createSwitch 时，可以手写 Switch 节点。
local enable = {
    -- Switch 表示开关组件类型。
    Switch = {
        -- name 是取值名，之后用 values.enable 读取 true/false。
        name = "enable",
        -- title 是界面上显示的开关文字。
        title = "启用功能",
        -- isSelected 是默认是否开启。
        isSelected = true,
        -- layout 控制宽度：小屏半行，大屏四分之一行。
        layout = { span = 6, lg = 3 },
    }
}

-- 创建滑块。
-- 参数1 "speed"：取值名。
-- 参数2 50：默认值。
-- 参数3 "速度"：标题。
-- 参数4 0：最小值。
-- 参数5 100：最大值。
-- 参数6 1：步进。
local speed = ui.createSlider("speed", 50, "速度", 0, 100, 1)
-- 滑块太窄不好操作，所以固定占满一整行。
speed.Slider.layout = { span = 12 }

-- buildUI 用来把组件交给前端渲染。
-- 第一个参数是组件数组。
-- 第二个参数 1 表示更新结构时尽量保留用户已经修改过的值。
ui.buildUI({
    {
        -- Group 是布局分组，不产生值。
        Group = {
            -- title 是分组标题。
            title = "基础参数",
            -- direction="grid" 表示使用 12 栅格布局。
            direction = "grid",
            -- columns=12 表示一行总共 12 格。
            columns = 12,
            -- gap=4 表示组件之间的间距。
            gap = 4,
            -- item 是分组内组件。每一层大括号表示一行。
            item = {
                -- name、count、enable 都是短控件，会按 layout 自动换行。
                { name, count, enable },
                -- speed 是整行控件。
                { speed },
            },
        }
    }
}, 1)

-- 启动 UI 显示和监听。
StartUI()

-- 用户修改任意 UI 参数时会调用这个函数。
-- values 是当前完整 UI 值表，不只是本次变化的字段。
function onUIChanged(values)
    -- 读取文本输入框当前值。
    print("name =", values.name)
    -- 读取数字输入框当前值。
    print("count =", values.count)
    -- 读取开关当前值，结果是 true 或 false。
    print("enable =", values.enable)
    -- 读取滑块当前值。
    print("speed =", values.speed)
end