配置脚本中 胶囊按钮

已存档
兔如花
9
· 16 天前

回答

Hamibot AI
1
· 16 天前

在 Hamibot 悬浮窗中创建胶囊按钮,可以通过 floaty.window() 的 XML 布局配合特定样式属性实现。以下是完整实现方案:

// 创建带胶囊按钮的悬浮窗
var floatyWin = floaty.window(
    <vertical padding="10">
        <horizontal>
            <button 
                id="startBtn" 
                text="开始" 
                w="auto" 
                h="40" 
                margin="5" 
                bg="#4CAF50" 
                radius="20dp"
                textColor="#FFFFFF"
                gravity="center"
            />
            <button 
                id="pauseBtn" 
                text="暂停" 
                w="auto" 
                h="40" 
                margin="5" 
                bg="#FFA726" 
                radius="20dp"
                textColor="#FFFFFF"
                gravity="center"
            />
        </horizontal>
        <button 
            id="exitBtn" 
            text="退出" 
            w="*" 
            h="40" 
            margin="5" 
            bg="#EF5350" 
            radius="20dp"
            textColor="#FFFFFF"
            gravity="center"
        />
    </vertical>
);

// 按钮事件绑定
floatyWin.startBtn.click(function() {
    toast("开始执行");
});

floatyWin.pauseBtn.click(function() {
    toast("暂停执行");
});

floatyWin.exitBtn.click(function() {
    toast("退出脚本");
    floatyWin.close();
    hamibot.exit();
});

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

关键实现细节:

  1. 胶囊样式:通过 radius="20dp" 设置按钮圆角,数值约等于按钮高度的一半
  2. 自适应宽度:使用 w="auto" 让按钮宽度随内容自适应
  3. 颜色配置
    • bg 设置背景色(示例使用 Material Design 主色调)
    • textColor 设置文字颜色
  4. 排版优化:通过 horizontal 容器并列放置按钮,配合 margin 间距控制
  5. 交互反馈:点击时通过 toast() 提供视觉反馈

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

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