在 Hamibot 的 UI 系统中，你可以通过 id 获取控件，并为其绑定事件监听器。以下是完整代码示例，为每个 checkbox 添加点击事件，并控制 confirmBtn 的行为；同时声明一个变量 show 来控制整个层的显示或隐藏。

// 文档地址 https://docs.hamibot.com/

var show = true; // 控制层是否显示

let layout1 = (
    <frame bg="#EEEEEE" padding="16" visibility="{{ show ? 'visible' : 'gone' }}">
        <vertical>
            <text text="请选择选项" textSize="18sp" marginBottom="16"/>
            <checkbox id="option1" text="选项一" checked="true"/>
            <checkbox id="option2" text="选项二"/>
            <checkbox id="option3" text="选项三"/>
            <button id="confirmBtn" text="确定" marginTop="16"/>
        </vertical>
    </frame>
);

ui.layout(layout1);

// 为每个 checkbox 绑定点击事件
ui.option1.click(function () {
    toast("选项一被点击，当前状态：" + (this.isChecked() ? "选中" : "未选中"));
});

ui.option2.click(function () {
    toast("选项二被点击，当前状态：" + (this.isChecked() ? "选中" : "未选中"));
});

ui.option3.click(function () {
    toast("选项三被点击，当前状态：" + (this.isChecked() ? "选中" : "未选中"));
});

// 为确认按钮绑定点击事件
ui.confirmBtn.click(function () {
    var selectedOptions = [];

    if (ui.option1.isChecked()) {
        selectedOptions.push("选项一");
    }
    if (ui.option2.isChecked()) {
        selectedOptions.push("选项二");
    }
    if (ui.option3.isChecked()) {
        selectedOptions.push("选项三");
    }

    if (selectedOptions.length > 0) {
        toast("你选择了：" + selectedOptions.join(", "));
    } else {
        toast("没有选择任何选项");
    }
});

功能说明：

• show 变量：用于控制整个布局的可见性。你可以通过更改 show = true 或 show = false 来显示或隐藏界面。
• checkbox 事件：当用户点击每个复选框时，会弹出提示信息，显示其当前状态。
• confirmBtn 事件：当用户点击“确定”按钮时，会检查所有选项的状态并提示用户的选择内容。

如果需要动态控制界面显示/隐藏，可以结合 show 变量和 setVisibility() 方法实现。

补充回答 1

在 Hamibot 中，UI 相关的脚本必须运行在 ui 模式 下才能正常执行。你遇到的错误提示“需要在 ui 模式下运行才能使用该函数”是因为没有正确启用 UI 模式。

解决方法：

在脚本最开头添加以下语句来启用 UI 模式：

"ui";

确保这行代码位于脚本的第一行，前面不要有任何其他字符或空格，例如：

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

var show = true;

let layout1 = (
    <frame bg="#EEEEEE" padding="16" visibility="{{ show ? 'visible' : 'gone' }}">
        <vertical>
            <text text="请选择选项" textSize="18sp" marginBottom="16"/>
            <checkbox id="option1" text="选项一" checked="true"/>
            <checkbox id="option2" text="选项二"/>
            <checkbox id="option3" text="选项三"/>
            <button id="confirmBtn" text="确定" marginTop="16"/>
        </vertical>
    </frame>
);

ui.layout(layout1);

// 为每个 checkbox 绑定点击事件
ui.option1.click(function () {
    toast("选项一被点击，当前状态：" + (this.isChecked() ? "选中" : "未选中"));
});

ui.option2.click(function () {
    toast("选项二被点击，当前状态：" + (this.isChecked() ? "选中" : "未选中"));
});

ui.option3.click(function () {
    toast("选项三被点击，当前状态：" + (this.isChecked() ? "选中" : "未选中"));
});

// 为确认按钮绑定点击事件
ui.confirmBtn.click(function () {
    var selectedOptions = [];

    if (ui.option1.isChecked()) {
        selectedOptions.push("选项一");
    }
    if (ui.option2.isChecked()) {
        selectedOptions.push("选项二");
    }
    if (ui.option3.isChecked()) {
        selectedOptions.push("选项三");
    }

    if (selectedOptions.length > 0) {
        toast("你选择了：" + selectedOptions.join(", "));
    } else {
        toast("没有选择任何选项");
    }
});

注意事项：

• 确保 "ui"; 是脚本的第一行。
• 运行前请开启 Hamibot 的无障碍服务和悬浮窗权限。
• 如果你使用的是 Hamibot Pro，请确保已授权脚本运行权限。

这样修改后，脚本就可以正常以 UI 模式运行，并支持界面控件和交互操作。

补充回答 2

如果你希望不通过 ui.xxx 的方式绑定事件，而是使用更传统的 JavaScript 事件监听方法（例如通过 on 或直接赋值 onclick），你需要使用 floaty.window 创建悬浮窗界面，并手动为控件绑定事件。

以下是符合你要求的完整代码示例：

// 文档地址 https://docs.hamibot.com/

var floatyWin = floaty.window(
    <vertical padding="16" bg="#EEEEEE">
        <text text="请选择选项" textSize="18sp" marginBottom="16"/>
        <checkbox id="option1" text="选项一" checked="true"/>
        <checkbox id="option2" text="选项二"/>
        <checkbox id="option3" text="选项三"/>
        <button id="confirmBtn" text="确定" marginTop="16"/>
    </vertical>
);

// 控制悬浮窗显示状态
var showing = true;

// 为每个 checkbox 添加点击事件
floatyWin.option1.click(function () {
    toast("选项一被点击，当前状态：" + (this.isChecked() ? "选中" : "未选中"));
});

floatyWin.option2.click(function () {
    toast("选项二被点击，当前状态：" + (this.isChecked() ? "选中" : "未选中"));
});

floatyWin.option3.click(function () {
    toast("选项三被点击，当前状态：" + (this.isChecked() ? "选中" : "未选中"));
});

// 确定按钮点击事件
floatyWin.confirmBtn.click(function () {
    var selectedOptions = [];

    if (floatyWin.option1.isChecked()) {
        selectedOptions.push("选项一");
    }
    if (floatyWin.option2.isChecked()) {
        selectedOptions.push("选项二");
    }
    if (floatyWin.option3.isChecked()) {
        selectedOptions.push("选项三");
    }

    if (selectedOptions.length > 0) {
        toast("你选择了：" + selectedOptions.join(", "));
    } else {
        toast("没有选择任何选项");
    }
});

// 悬浮窗保持运行
setInterval(() => {}, 1000);

特点说明：

• 不使用 ui.layout() 和 ui.xxx 方式绑定事件。
• 使用 floaty.window() 构建悬浮窗界面。
• 所有事件监听器均通过 控件.id.click() 方式绑定。
• 不需要启用 UI 模式 ("ui";)，适合普通自动化脚本场景。

⚠️ 注意：该方式创建的界面不会自动适应屏幕旋转或配置变更，如需高级布局功能建议使用 "ui" 模式。