UI组件联动示例 ​

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

-- 创建“高级设置”开关。
-- 这个组件的取值名是 advanced。
-- 后面的 threshold.Slider.disabledWhen 会读取 advanced。
local advancedSwitch = {
    Switch = {
        -- name 是取值名，对应 values.advanced。
        name = "advanced",
        -- title 是界面显示文字。
        title = "高级设置",
        -- 默认关闭。
        isSelected = false,
        -- 小屏半行，大屏四分之一行。
        layout = { span = 6, lg = 3 },
    }
}

-- 创建“调试模式”开关。
-- 这个组件的取值名是 debug。
-- 后面的 debugText.Input.visibleWhen 会读取 debug。
local debugSwitch = {
    Switch = {
        -- name 是取值名，对应 values.debug。
        name = "debug",
        -- title 是界面显示文字。
        title = "调试模式",
        -- 默认关闭。
        isSelected = false,
        -- 小屏半行，大屏四分之一行。
        layout = { span = 6, lg = 3 },
    }
}

-- 创建识别阈值滑块。
-- 参数1 "threshold"：取值名，对应 values.threshold。
-- 参数2 75：默认值。
-- 参数3 "识别阈值"：标题。
-- 参数4 0：最小值。
-- 参数5 100：最大值。
-- 参数6 1：步进。
local threshold = ui.createSlider("threshold", 75, "识别阈值", 0, 100, 1)
-- 滑块保持整行，避免太窄。
threshold.Slider.layout = { span = 12 }
-- disabledWhen 表示“条件满足时禁用当前组件”。
threshold.Slider.disabledWhen = {
    -- field 指向控制组件 advanced。
    field = "advanced",
    -- equals=false 表示 advanced 为 false 时满足条件。
    equals = false,
}

-- 创建调试备注输入框。
-- 参数1 "debugText"：取值名，对应 values.debugText。
-- 参数2 "调试备注"：标题。
-- 参数3 "请输入备注"：占位提示。
-- 参数4 ""：默认值为空。
local debugText = ui.createInput("debugText", "调试备注", "请输入备注", "")
-- 调试备注整行显示。
debugText.Input.layout = { span = 12 }
-- visibleWhen 表示“条件满足时显示当前组件”。
debugText.Input.visibleWhen = {
    -- field 指向控制组件 debug。
    field = "debug",
    -- equals=true 表示 debug 为 true 时显示。
    equals = true,
}

-- 构建 UI。
ui.buildUI({
    {
        Group = {
            -- 分组标题。
            title = "联动设置",
            -- 使用栅格布局。
            direction = "grid",
            -- 一行 12 格。
            columns = 12,
            -- 组件间距。
            gap = 4,
            -- 组件内容。
            item = {
                -- 两个开关放在第一行。
                { advancedSwitch, debugSwitch },
                -- threshold 会被 advanced 控制是否禁用。
                { threshold },
                -- debugText 会被 debug 控制是否显示。
                { debugText },
            },
        }
    }
}, 1)

-- 显示 UI。
StartUI()

-- 打印当前完整 UI 值。
function onUIChanged(values)
    print("advanced =", values.advanced)
    print("threshold =", values.threshold)
    print("debug =", values.debug)
    print("debugText =", values.debugText)
end