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组件的边框
  }
}

HarmonyOS

Heiang

2天前

浏览

回答 1

待解决

回答 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

// 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)
  }
}

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

2天前

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

发布

51CTO

51CTO博客

51CTO学堂

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

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