鸿蒙Next中如何设置button的borderRadius属性

在鸿蒙Next开发中，我想给Button组件设置圆角效果，但尝试直接设置borderRadius属性没有生效。请问正确的实现方式是什么？是否需要通过样式或背景属性来配置？求具体代码示例。

2 回复

在鸿蒙Next中，设置Button的borderRadius属性很简单，就像给按钮穿上了圆角裤衩！直接在XML里写：

ohos:border_radius="10vp"

或者在代码里动态设置：

button.setBorderRadius(10);

注意单位用vp，这样圆角就能自适应屏幕啦！

更多关于鸿蒙Next中如何设置button的borderRadius属性的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，设置Button的borderRadius属性可以通过以下步骤实现：

  1. 在XML布局文件中定义Button，并使用ohos:element或background_element属性设置圆角。
  2. 使用ShapeElement来定义圆角背景，通过ShapeElement的setCornerRadius方法设置圆角半径。

示例代码：

XML布局（例如：ability_main.xml）：

<Button
    ohos:id="$+id:my_button"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:text="圆角按钮"
    ohos:background_element="$graphic:button_background"/>

图形资源文件（在resources/base/graphic/目录下创建button_background.xml）：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="20vp"/>
    <solid
        ohos:color="#007DFF"/>
</shape>

或在Java/ArkTS代码中动态设置：

  • Java示例：

    Button button = (Button) findComponentById(ResourceTable.Id_my_button);
ShapeElement background = new ShapeElement();
background.setRoundedCornerRadius(20); // 设置圆角半径（单位：vp）
background.setShape(ShapeElement.RECTANGLE);
background.setBgColor(new Color(0xFF007DFF));
button.setBackground(background);

  • ArkTS示例：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct MyComponent {
  build() {
    Button('圆角按钮')
      .borderRadius(20) // 直接设置圆角
      .backgroundColor('#007DFF')
      .width(100)
      .height(40)
  }
}

说明：

  • 单位：通常使用虚拟像素（vp）确保适配不同屏幕密度。
  • ShapeElement：通过XML或代码定义背景形状，支持矩形、圆形等，并通过ohos:radius或setRoundedCornerRadius设置圆角。
  • 直接属性：在ArkTS中，Button组件支持直接通过.borderRadius()方法设置。

根据开发场景选择XML静态定义或代码动态设置即可实现圆角按钮效果。

回到顶部