#HarmonyOS：@Extend装饰器：定义扩展组件样式

使用示例

常规写法

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(100)
        .backgroundColor(Color.Blue)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(200)
        .backgroundColor(Color.Pink)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(300)
        .backgroundColor(Color.Orange)
    }.margin('20%')
  }
}

公用方法

@Extend(Text) function fancyText(weightValue: number, color: Color) {
  .fontStyle(FontStyle.Italic)
  .fontWeight(weightValue)
  .backgroundColor(color)
}

使用公用方法

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fancyText(100, Color.Blue)
      Text(`${this.label}`)
        .fancyText(200, Color.Pink)
      Text(`${this.label}`)
        .fancyText(300, Color.Orange)
    }.margin('20%')
  }
}

通俗的示例 @Extend(Text) function opacityTextStyle(fontSize: number, fontColor:string)

@Component
export default struct TargetInformation {
  build() {
    Row() {
      Image($r("app.media.icon"))
        .opacityImageStyle() // 扩展Image组件样式
      Column() {
        Text('第一季度运营目标')
          .opacityTextStyle(24, '#ffdd3355')
        Text('实现')
          .opacityTextStyle(16, '#999') // 扩展Text组件样式
      }
      .alignItems(HorizontalAlign.Start)
      .margin({ left: '20fp'})
    }
  }
}

/**
 * 自定义Image组件的样式  @Extend装饰器：定义扩展组件样式
 */
@Extend(Image) function opacityImageStyle() {
  .width("80vp")
  .height("80vp")
  .objectFit(ImageFit.Fill)
}

/**
 * 自定义Text组件的样式  @Extend装饰器：定义扩展组件样式
 */
@Extend(Text) function opacityTextStyle(fontSize: number, fontColor:string) {
  .fontSize(fontSize)
  .fontColor(fontColor)
}