harmonyOS学习笔记之@Styles装饰器与@Extend装饰器

原创已于 2023-12-03 18:41:45 修改 · 881 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #学习

于 2023-12-03 16:45:55 首次发布

HarmonyOS 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了如何使用React中的@Styles装饰器在组件内部和全局定义样式，以及@Extend装饰器用于扩展原生组件样式，包括支持参数传递和私有属性。作者分享了结构化使用这两个装饰器的例子，并讨论了它们的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@Styles装饰器

定义组件重用样式
自定义样式函数使用装饰器
可以定义在组件内或全局,内部优先级>外部,内部不需要function,外部需要function
定义在组件内的@styles可以通过this访问组件内部的常量和状态变量,可以在@styles里通过事件来改变状态变量
弊端:只支持通用属性和通用事件不能传参

@Entry
@Component
struct StylesFun {
  @State count: number = 100
  @State bc: Color|string = Color.Blue
  // 组件内部
  @Styles interiorStyle() {
    .width(200)
    .height(this.count)
    .backgroundColor(this.bc)
    .onClick(() => {
      this.count++
      if(this.bc==Color.Blue||this.bc=='blue'){
        this.bc='green'
      }else{
        this.bc='blue'
      }
    })
  }
  build() {
    Row() {
      Column() {
        Text('我是组件内部@Styles的样式')
          .fontSize(30)
          .interiorStyle()
        Text('我是全局@Styles的样式')
          .fontSize(30)
          .overallStyle()
      }
      .width('100%')
    }
    .height('100%')
  }
}
// 全局
@Styles function overallStyle () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Extend装饰器

定义扩展组件样式
在@Styles的基础上,用于扩展原生组件样式
仅支持定义在全局,不支持在组件内部定义
支持封装指定的组件的私有属性和私有事件,也支持预定义相同组件的@Extend的方法
支持参数,可传递参数
参数可以为Function,或者 ()=>{} ,作为Event事件,例如:

@Extend(Text) function sizeColor(FSize:string|number,FColor?:string|Color){
  .fontSize(FSize)
  .fontColor(FColor)
}
@Extend(Button) function testClick(FSize:string|number,click:()=>void) {
  .fontSize(FSize)
  .width(300)
  .height(50)
  .click()
}
@Entry
@Component
struct ExtendFun {
  @State message: string = 'Hello World'
  @State count: number = 0
  onClickAdd() {
    this.count++
  }

  build() {
    Row() {
      Text('我是数字:'+this.count).sizeColor(40,Color.Pink)
      Button('点我...快点我...').testClick(40,()=>{
        this.onClickAdd()
      })
    }
  }
}