如何创建一个提供给用户可以点击的工具界面,例如在设备上生成一个弹窗,点击指定位置可以展开和缩小,展开后可以根据按钮执行对应的脚本逻辑。

已存档
JuN7 · 1 个月前

回答

Hamibot AI
1
· 1 个月前

你可以使用 Hamibot 的 floaty 模块来创建悬浮窗工具界面。以下是一个完整的示例,实现可展开/缩小的悬浮窗,并通过按钮执行对应脚本逻辑:

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

// 创建悬浮窗口
var window = floaty.window(
    <frame id="mainFrame" gravity="center" bg="#aa00ff00">
        <vertical id="content" visibility="gone">
            <button id="btn1" text="功能1" w="auto"/>
            <button id="btn2" text="功能2" w="auto"/>
            <button id="btn3" text="功能3" w="auto"/>
        </vertical>
        <button id="toggleBtn" text="≡" w="30" h="30" bg="#ff0099"/>
    </frame>
);

// 初始位置和大小设置
window.setPosition(device.width - 150, device.height / 2);
window.setSize(150, 50);

// 控制展开/收起状态
var isExpanded = false;

// 展开/收起按钮点击事件
window.toggleBtn.click(function() {
    if (isExpanded) {
        // 收起
        window.content.setVisibility(8); // View.GONE
        window.setSize(150, 50);
        window.toggleBtn.setText("≡");
    } else {
        // 展开
        window.content.setVisibility(0); // View.VISIBLE
        window.setSize(150, 180);
        window.toggleBtn.setText("×");
    }
    isExpanded = !isExpanded;
});

// 功能按钮点击事件
window.btn1.click(function() {
    toast("执行功能1");
    // 在这里添加功能1的脚本逻辑
});

window.btn2.click(function() {
    toast("执行功能2");
    // 在这里添加功能2的脚本逻辑
});

window.btn3.click(function() {
    toast("执行功能3");
    // 在这里添加功能3的脚本逻辑
});

// 保持悬浮窗不被关闭
setInterval(function() {}, 1000);

这个悬浮窗具有以下特性:

  1. 初始状态为缩小的按钮("≡"图标)
  2. 点击图标可以展开显示三个功能按钮
  3. 再次点击"×"图标可以收起功能按钮
  4. 每个功能按钮可以绑定不同的脚本逻辑

你可以根据需要:

  • 修改按钮数量和文本
  • 调整窗口位置和大小参数
  • 在按钮的click事件中添加具体的脚本功能
  • 自定义颜色和样式(bg属性)

确保在Hamibot中启用悬浮窗权限,这个界面会在设备上显示为一个可交互的浮动工具面板。

ℹ️ 本回答由 AI 生成,内容仅供参考