要使用 ui 创建一个包含一组多选框的弹出层，你可以结合 dialogs.build() 方法来自定义对话框内容。以下是实现示例：

// 文档地址 https://docs.hamibot.com/
var dialog = dialogs.build({
    title: "请选择选项",
    positive: "确定",
    negative: "取消"
});

// 使用垂直布局添加多个复选框
dialog.layout(
    <vertical padding="10dp">
        <checkbox id="option1" text="选项 A" />
        <checkbox id="option2" text="选项 B" />
        <checkbox id="option3" text="选项 C" />
    </vertical>
);

// 显示对话框并处理点击事件
dialog.on("positive", function() {
    if (dialog.option1.checked) {
        toast("你选择了选项 A");
    }
    if (dialog.option2.checked) {
        toast("你选择了选项 B");
    }
    if (dialog.option3.checked) {
        toast("你选择了选项 C");
    }
});

dialog.show();

说明：

1. dialogs.build(properties)：用于创建一个可自定义的对话框。
2. dialog.layout(xml)：为对话框设置布局，这里使用了垂直布局 <vertical> 和三个 <checkbox> 控件。
3. dialog.on("positive", function() {...})：监听“确定”按钮的点击事件，并检查每个复选框的状态。

你可以根据需要调整复选框的数量和文本内容。

补充回答 1

以下是两个完整的示例，分别使用 原生 Android 组件 和 ui 模块 创建一个包含复选框的层，并通过变量 show 控制该层是否显示。

✅ 示例 1：使用原生 Android 组件创建复选框层

// 文档地址 https://docs.hamibot.com/
var show = true; // 控制是否显示层

// 创建一个垂直布局
var layout = ui.inflate(
    <vertical padding="16dp">
        <checkbox id="cb1" text="选项 A" />
        <checkbox id="cb2" text="选项 B" />
        <checkbox id="cb3" text="选项 C" />
    </vertical>
);

if (show) {
    // 添加到当前界面
    ui.layout(layout);

    // 设置复选框点击事件
    layout.cb1.on("check", function(checked) {
        if (checked) toast("你勾选了 选项 A");
        else toast("取消勾选 选项 A");
    });

    layout.cb2.on("check", function(checked) {
        if (checked) toast("你勾选了 选项 B");
        else toast("取消勾选 选项 B");
    });

    layout.cb3.on("check", function(checked) {
        if (checked) toast("你勾选了 选项 C");
        else toast("取消勾选 选项 C");
    });
}

✅ 示例 2：使用 ui 模块创建复选框层（XML 布局）

// 文档地址 https://docs.hamibot.com/
var show = true; // 控制是否显示层

if (show) {
    // 使用 XML 定义布局结构
    ui.layout(
        <vertical padding="16dp">
            <checkbox id="cb1" text="选项 A" />
            <checkbox id="cb2" text="选项 B" />
            <checkbox id="cb3" text="选项 C" />
        </vertical>
    );

    // 设置复选框点击事件
    ui.cb1.on("check", function(checked) {
        if (checked) toast("你勾选了 选项 A");
        else toast("取消勾选 选项 A");
    });

    ui.cb2.on("check", function(checked) {
        if (checked) toast("你勾选了 选项 B");
        else toast("取消勾选 选项 B");
    });

    ui.cb3.on("check", function(checked) {
        if (checked) toast("你勾选了 选项 C");
        else toast("取消勾选 选项 C");
    });
}

📌 说明：

• show 变量用于控制层是否显示。
• 在第一个示例中，使用了 ui.inflate() 动态加载 XML 布局并添加到界面中。
• 第二个示例更简洁，直接使用 ui.layout() 设置整个界面为指定的 XML 布局。
• 每个复选框都绑定了 check 事件，当用户勾选或取消勾选时会弹出提示信息。

你可以根据实际需要选择使用哪种方式来实现你的需求。

补充回答 2

要在 ui 模式 下运行脚本，需要满足以下条件，并按照规范编写代码：

✅ 1. 在脚本最开始添加 'ui'; 声明

这是告诉 Hamibot 引擎该脚本使用 UI 模式运行。注意：

• 必须放在脚本的第一行；
• 前面不能有任何字符（包括空格和注释）；

// 文档地址 https://docs.hamibot.com/
'ui';

ui.layout(
    <vertical padding="16dp">
        <text text="这是一个UI模式的界面" />
        <button text="点击我" onClick={clickHandler} />
    </vertical>
);

function clickHandler() {
    toast("按钮被点击了");
}

✅ 2. 使用 ui.layout() 构建界面布局

你可以传入一个 XML 格式的布局结构，例如：

ui.layout(
    <vertical>
        <checkbox id="cb1" text="选项 A" />
        <checkbox id="cb2" text="选项 B" />
    </vertical>
);

✅ 3. 使用事件绑定方式响应用户操作

由于 ui 模式基于异步机制，不支持传统的同步阻塞写法。你需要用回调函数或 Promise 来处理交互。

示例：为按钮绑定点击事件

'ui';

ui.layout(
    <vertical>
        <button id="btn" text="点我" />
    </vertical>
);

ui.btn.onClick = function () {
    toast("按钮被点击");
};

✅ 4. 使用 dialogs 的 Promise 或回调方式与用户交互

在 ui 模式下，alert()、confirm() 等函数不能像普通 JavaScript 那样同步返回结果，应使用 Promise 或回调函数：

'ui';

confirm("是否继续？").then(function (result) {
    if (result) {
        toast("你选择了确定");
    } else {
        toast("你选择了取消");
    }
});

📌 注意事项

✅ 完整示例

// 文档地址 https://docs.hamibot.com/
'ui';

auto();

ui.layout(
    <vertical padding="16dp">
        <text text="欢迎使用UI模式" />
        <button id="btnConfirm" text="确认操作" />
    </vertical>
);

ui.btnConfirm.onClick = function () {
    confirm("确定要执行此操作吗？").then(function (res) {
        if (res) {
            toast("已确认");
        } else {
            toast("已取消");
        }
    });
};

只要遵循以上规则，你就可以在 Hamibot 中顺利使用 ui 模式 编写图形化界面脚本。