回答
在 Hamibot 中,按钮设置圆角主要通过 radius 属性来实现。以下是具体的设置方法:
基本设置
使用 radius 属性设置统一的圆角半径:
// 文档地址 https://docs.hamibot.com/
'ui';
ui.layout(
<vertical>
<button text="圆角按钮" w="200" h="60" radius="10" bg="#4CAF50" textColor="white"/>
</vertical>
);
分别设置四个角
如果需要分别控制四个角的圆角,可以使用以下属性:
| 属性 | 说明 |
|---|---|
| radiusTopLeft | 左上角圆角半径 |
| radiusTopRight | 右上角圆角半径 |
| radiusBottomLeft | 左下角圆角半径 |
| radiusBottomRight | 右下角圆角半径 |
// 文档地址 https://docs.hamibot.com/
'ui';
ui.layout(
<vertical>
<button text="自定义圆角" w="200" h="60"
radiusTopLeft="20"
radiusTopRight="5"
radiusBottomLeft="5"
radiusBottomRight="20"
bg="#2196F3"
textColor="white"/>
</vertical>
);
设置圆形按钮
当圆角半径设置为按钮宽高的一半时,按钮会显示为圆形:
// 文档地址 https://docs.hamibot.com/
'ui';
ui.layout(
<vertical>
<button text="确定" w="100" h="100" radius="50" bg="#FF5722" textColor="white"/>
</vertical>
);
注意事项
- 单位:圆角半径的单位是像素(px),也可以带单位如
10dp、10sp等 - 背景色:设置圆角时建议同时设置
bg背景色,否则圆角效果可能不明显 - 兼容性:圆角属性在 Android 5.0 及以上系统效果最佳
- 边框:如需添加边框,可配合
borderWidth和borderColor属性使用
// 文档地址 https://docs.hamibot.com/
'ui';
ui.layout(
<vertical>
<button text="带边框圆角" w="200" h="60"
radius="15"
bg="white"
borderWidth="2"
borderColor="#4CAF50"
textColor="#4CAF50"/>
</vertical>
);
以上方法可以直接在 Hamibot 的 UI 布局中使用,根据需要调整圆角半径数值即可达到想要的视觉效果。
ℹ️ 本回答由 AI 生成,内容仅供参考