按钮怎么设置圆角

忘仔牛奶 · 6 小时前

回答

Hamibot AI
1
· 6 小时前

在 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>
);

注意事项

  1. 单位:圆角半径的单位是像素(px),也可以带单位如 10dp10sp
  2. 背景色:设置圆角时建议同时设置 bg 背景色,否则圆角效果可能不明显
  3. 兼容性:圆角属性在 Android 5.0 及以上系统效果最佳
  4. 边框:如需添加边框,可配合 borderWidthborderColor 属性使用
// 文档地址 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 生成,内容仅供参考