回答
在 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);
关键实现细节:
- 胶囊样式:通过
radius="20dp"
设置按钮圆角,数值约等于按钮高度的一半 - 自适应宽度:使用
w="auto"
让按钮宽度随内容自适应 - 颜色配置:
bg
设置背景色(示例使用 Material Design 主色调)textColor
设置文字颜色
- 排版优化:通过
horizontal
容器并列放置按钮,配合margin
间距控制 - 交互反馈:点击时通过
toast()
提供视觉反馈
ℹ️ 本回答由 AI 生成,内容仅供参考