UI分页示例 ​

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

-- 创建基础页里的文本输入框。
-- 参数1 "name"：取值名，对应 values.name。
-- 参数2 "名称"：标题。
-- 参数3 "请输入名称"：占位提示。
-- 参数4 ""：默认值为空。
local name = ui.createInput("name", "名称", "请输入名称", "")
-- 短输入框使用小屏两列、大屏四列。
name.Input.layout = { span = 6, lg = 3 }

-- 创建基础页里的速度滑块。
-- 参数1 "speed"：取值名，对应 values.speed。
-- 参数2 50：默认值。
-- 参数3 "速度"：标题。
-- 参数4 0：最小值。
-- 参数5 100：最大值。
-- 参数6 1：步进。
local speed = ui.createSlider("speed", 50, "速度", 0, 100, 1)
-- 滑块固定整行。
speed.Slider.layout = { span = 12 }

-- 创建调试页里的开关。
local debug = {
    Switch = {
        -- 取值名，对应 values.debug。
        name = "debug",
        -- 显示文字。
        title = "调试模式",
        -- 默认关闭。
        isSelected = false,
        -- 短组件宽度。
        layout = { span = 6, lg = 3 },
    }
}

-- 创建调试页里的日志等级下拉框。
-- 参数1 "logLevel"：取值名，对应 values.logLevel。
-- 参数2 "info"：默认选项 key。
-- 参数3 "日志等级"：标题。
-- 参数4：选项数组。
local logLevel = ui.createSelect("logLevel", "info", "日志等级", {
    -- key 是最终值，label 是显示文字。
    { key = "info", label = "信息" },
    { key = "warn", label = "警告" },
    { key = "error", label = "错误" },
})
-- 下拉框是短组件。
logLevel.Select.layout = { span = 6, lg = 3 }

-- 创建 Tabs。
-- 参数1：Tab 数组。
-- 参数2 "top"：页签位置在顶部。小屏优先推荐 top。
-- 参数3 true：是否 fullWidth，通常顶部 Tabs 推荐 true。
local tabs = ui.createTabs({
    -- 第一个页签：基础。
    ui.createTab("基础", {
        -- name 输入框在基础页。
        { name },
        -- speed 滑块在基础页。
        { speed },
    }),
    -- 第二个页签：调试。
    ui.createTab("调试", {
        -- debug 和 logLevel 在调试页。
        { debug, logLevel },
    }),
}, "top", true)

-- fullWidth=true 表示 Tabs 尽量占满可用宽度。
tabs.Tabs.fullWidth = true

-- 构建 UI。Tabs 自身不产生值。
ui.buildUI({ tabs }, 1)
-- 显示 UI。
StartUI()

-- 打印页签内部组件的值。
function onUIChanged(values)
    print("name =", values.name)
    print("speed =", values.speed)
    print("debug =", values.debug)
    print("logLevel =", values.logLevel)
end