制作一个可以延展缩放的显示窗口并添加上开始暂停

已存档
krawfndbai · 1 个月前
第 1 条补充
·
1 个月前

制作一个控制器使得可以最小化控制器供
功能添加开始暂停
并举一个可运行的案例

回答

Hamibot AI
1
· 1 个月前

要创建一个可动态调整大小并包含开始暂停按钮的悬浮窗,可以使用 Hamibot 提供的 floaty.rawWindow 接口,并结合 setSize() 方法实现窗口大小的切换。以下是完整的实现方案:


✅ 实现功能

  • 创建一个悬浮窗,初始状态下窗口大小为 200x100
  • 包含“开始”和“暂停”两个按钮
  • 点击“开始”按钮,窗口大小变为 300x200
  • 点击“暂停”按钮,窗口恢复为初始大小 200x100

🧩 示例代码(JavaScript)

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

var floatyWin = floaty.rawWindow(
    <vertical padding="16">
        <button id="startBtn" text="开始" bg="#4CAF50" />
        <button id="pauseBtn" text="暂停" bg="#F44336" />
    </vertical>
);

// 设置初始窗口大小
floatyWin.setSize(200, 100);

// 设置窗口位置(可选)
floatyWin.setPosition(500, 500);

// 开始按钮点击事件
floatyWin.startBtn.click(function () {
    toast("开始");
    // 改变窗口大小
    floatyWin.setSize(300, 200);
});

// 暂停按钮点击事件
floatyWin.pauseBtn.click(function () {
    toast("暂停");
    // 恢复窗口大小
    floatyWin.setSize(200, 100);
});

// 防止悬浮窗自动关闭
setInterval(function () {}, 1000);

📌 注意事项

  • 使用 floaty.rawWindow 而非 floaty.window,以获得对窗口大小、位置等更多控制。
  • setSize(width, height) 的参数:
    • 正数:指定具体像素大小
    • -1:全屏
    • -2:根据内容自动调整大小
  • 你可以根据实际需求修改按钮样式、布局和窗口初始大小。

💡 扩展建议

  • 如果你希望实现拖拽缩放功能,需要自行监听触摸事件并动态修改 setSize,但该功能较为复杂,超出当前基础需求范围。
  • 可结合 setPosition() 实现窗口移动,进一步增强交互体验。

如需更多高级功能或复杂交互,请参考 Hamibot 官方文档或发送邮件至 support@hamibot.cn 获取技术支持。


补充回答 1

以下是可运行的控制器实现,支持最小化/展开切换,并包含开始与暂停功能的完整案例:


✅ 功能说明

  • 最小化模式:仅显示 1 个按钮,窗口大小 100x50
  • 展开模式:显示开始/暂停按钮,窗口大小 200x150
  • 状态反馈:通过按钮背景颜色变化表示任务状态
  • 兼容性:适用于 Hamibot 的 Rhino JavaScript 引擎

🧩 示例代码(JavaScript)

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

var running = false;  // 任务运行状态
var minimized = true; // 初始为最小化状态

// 创建悬浮窗
var floatyWin = floaty.rawWindow(
    <vertical padding="8">
        <button id="toggleBtn" text="展开" />
        <button id="startBtn" text="开始" bg="#4CAF50" />
        <button id="pauseBtn" text="暂停" bg="#F44336" enabled="false" />
    </vertical>
);

// 初始窗口大小(最小化)
floatyWin.setSize(100, 50);
floatyWin.setPosition(500, 500); // 设置初始位置

// 切换窗口大小函数
function toggleWindow() {
    if (minimized) {
        floatyWin.setSize(200, 150);  // 展开窗口
        floatyWin.toggleBtn.setText("收起");
        minimized = false;
    } else {
        floatyWin.setSize(100, 50);   // 最小化窗口
        floatyWin.toggleBtn.setText("展开");
        minimized = true;
    }
}

// 开始任务逻辑
function startTask() {
    if (running) return;
    running = true;
    toast("任务开始");
    floatyWin.startBtn.setBg("#8BC34A"); // 改变背景色
    floatyWin.pauseBtn.setEnabled(true);
}

// 暂停任务逻辑
function stopTask() {
    if (!running) return;
    running = false;
    toast("任务暂停");
    floatyWin.startBtn.setBg("#4CAF50"); // 恢复原色
    floatyWin.pauseBtn.setEnabled(false);
}

// 绑定按钮事件
floatyWin.toggleBtn.click(function () {
    toggleWindow();
});

floatyWin.startBtn.click(function () {
    startTask();
});

floatyWin.pauseBtn.click(function () {
    stopTask();
});

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

📌 使用说明

  1. 最小化模式

    • 仅显示“展开”按钮
    • 点击按钮切换为展开模式
  2. 展开模式

    • 显示“开始”和“暂停”按钮
    • 开始按钮默认绿色,点击后变为浅绿并禁用自身
    • 暂停按钮默认禁用,开始后启用
    • 再次点击“收起”按钮可返回最小化模式
  3. 状态反馈

    • 按钮颜色变化直观反映任务状态
    • 使用 toast() 提供临时通知

💡 扩展建议

  • 动态 UI:可添加 ui.run() 更新界面状态(如文本、颜色)
  • 拖拽支持:监听触摸事件实现窗口移动
  • 数据同步:结合 storage 存储任务状态,重启后恢复
  • 动画效果:通过多次调用 setSize() 实现平滑缩放

如需实现更复杂的交互(如拖拽、动画、多窗口切换),可发送邮件至 support@hamibot.cn 获取详细指导。

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