用ui 构建一个浮窗，有展开和折叠两个按钮，点开展开按... · 问答

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

var floatyWin = floaty.window(
  <vertical>
    <horizontal>
      <button id="expandBtn" text="展开" layout_weight="1"/>
      <button id="collapseBtn" text="折叠" layout_weight="1"/>
    </horizontal>
    <vertical id="tableContainer" bg="#eeeeee" padding="8" visibility="gone">
      <!-- 表格行1 -->
      <horizontal>
        <text text="产品名称" width="120" gravity="center"/>
        <text text="价格" width="120" gravity="center"/>
      </horizontal>
      <!-- 行分隔线 -->
      <view height="1" bg="#999999"/>
      
      <!-- 表格内容 -->
      <horizontal>
        <text text="商品A" width="120" gravity="center"/>
        <text text="¥199" width="120" gravity="center"/>
      </horizontal>
      <horizontal>
        <text text="商品B" width="120" gravity="center"/>
        <text text="¥299" width="120" gravity="center"/>
      </horizontal>
      <horizontal>
        <text text="商品C" width="120" gravity="center"/>
        <text text="¥399" width="120" gravity="center"/>
      </horizontal>
    </vertical>
  </vertical>
);

// 按钮点击事件
floatyWin.expandBtn.click(() => {
  floatyWin.tableContainer.setVisibility(0);  // 显示表格
});

floatyWin.collapseBtn.click(() => {
  floatyWin.tableContainer.setVisibility(8);  // 隐藏表格
});

效果说明：

初始状态只显示两个按钮
点击【展开】后显示带边框的表格，包含3行2列数据
点击【折叠】后隐藏表格区域
添加了分隔线提升表格可读性
所有控件使用固定宽度保持表格对齐

回答