制作一个可以折叠的小窗程序

已存档
krawfndbai · 1 个月前

回答

Hamibot AI
1
· 1 个月前

要实现可折叠的小窗程序,可以通过动态调整布局和悬浮窗尺寸实现。以下是完整代码示例:

// 文档地址 https://docs.hamibot.com/
auto.waitFor();

// 创建悬浮窗
var floatyWin = floaty.rawWindow(
  <vertical id="container" padding="10">
    <horizontal gravity="right">
      <button id="toggleBtn" text="展开" w="40" h="40" />
    </horizontal>
    <frame id="contentContainer" bg="#ffffff" visibility="gone">
      <text text="这里是可折叠的内容区域" textColor="#000000" textSize="16sp" padding="10"/>
    </frame>
  </vertical>
);

// 初始窗口尺寸(折叠状态)
floatyWin.setSize(200, 100);

// 添加点击事件监听
floatyWin.toggleBtn.click(function() {
    var visible = floatyWin.contentContainer.getVisibility();
    if (visible == "gone") {
        // 展开状态
        floatyWin.contentContainer.setVisibility("visible");
        floatyWin.toggleBtn.setText("收起");
        floatyWin.setSize(250, 200); // 调整为展开尺寸
    } else {
        // 折叠状态
        floatyWin.contentContainer.setVisibility("gone");
        floatyWin.toggleBtn.setText("展开");
        floatyWin.setSize(200, 100); // 恢复折叠尺寸
    }
});

// 可选:保持悬浮窗不消失
setInterval(() => {}, 1000);

代码说明:

  1. 使用 floaty.rawWindow() 创建基础布局
  2. 主容器为垂直布局,包含顶部控制按钮和内容区域
  3. 点击按钮时通过 setVisibility() 控制内容显示
  4. 通过 setSize() 动态调整悬浮窗尺寸
  5. 使用 setText() 实现按钮状态切换显示

效果说明:

  • 初始显示尺寸 200x100 像素(折叠状态)
  • 点击右上角按钮后展开为 250x200 像素,显示内容区域
  • 再次点击可恢复折叠状态

进阶建议:

  1. 可添加动画过渡效果(需使用 ValueAnimator)
  2. 可加入拖动手势支持(通过 onTouch 事件)
  3. 可保存窗口位置状态(使用 storages 模块)
ℹ️ 本回答由 AI 生成,内容仅供参考