HarmonyOS 父组件设置borderRadius参数无法裁切自组件的边框

父组件设置borderRadius参数无法裁切自组件的边框，代码如下：

@Component
struct Child {
  build() {
    Image('')
      .backgroundColor(Color.Gray)
      .width('100%')
      .height('100%')
  }
}

@Component
struct Child {
  build() {
    Child()
      .width(40)
      .height(40)
      .borderRadius(20) //设置该边框的圆角属性无法裁剪Child组件的边框
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

HarmonyOS

Heiang

2024-12-25 12:29:35

709浏览

回答 1

按赞同

按时间

Excelsior_abit

目前ArkUI并不支持自定义组件链式调用，替代方案参考示例如下：

// CustomSysComp.ets
@Component
struct CustomSysComp {

  // 设置自定义image
  imageModifier: MyImageModifier = new MyImageModifier()
  build() {
    Column() {
      Image('')
        .attributeModifier(this.imageModifier)
      Button("button")
        .margin({ top: 5 })
    }
    .width("100%")
    .height("100%")
  }
}

export class MyImageModifier implements AttributeModifier<ImageAttribute> {
  // 默认属性
  private mWidth: Length = 80
  private mHeight: Length = 80
  private mBackgroundColor: ResourceColor = Color.Gray

  // 定制属性
  private mBorderRadius: Length = 0

  constructor() {
  }
  // 实现组件的普通状态下的样式方法，系统还提供了hover状态和其他状态下的样式方法
  applyNormalAttribute(instance: ImageAttribute): void {
    instance.width(this.mWidth);
    instance.height(this.mHeight);
    instance.backgroundColor(this.mBackgroundColor)
    instance.borderRadius(this.mBorderRadius)
  }

  // 自定义属性名和系统组件属性名一致，便于链式调用时的一致性
  borderRadius(borderRadius: Length): MyImageModifier {
    this.mBorderRadius = borderRadius;
    return this;
  }
}
export default CustomSysComp
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.

// Index.ets:
import CustomSysComp, { MyImageModifier } from './CustomSysComp'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Text(this.message)
        .id('BorderRadiusPageHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
      CustomSysComp({
        imageModifier: new MyImageModifier()
          .borderRadius(20)
      })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

详细资料和其他场景示例请参考文档：https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-ui-component-encapsulation-V5

2024-12-25 15:03:08

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 父组件设置borderRadius参数无法裁切自组件的边框

订阅鸿蒙技术特刊，精选内容抢先看