Harmony装饰器

1、装饰器

装饰器是用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如：

• @Component表示自定义组件
• @Entry表示该自定义组件为入口组件
• @State表示组件中的状态变量，状态变量变化会触发UI刷新。

2 、语法范式

• @Builder/@BuilderParam：特殊的封装UI描述的方法，细粒度的封装和复用UI描述，如抽取组件。

  build() {
  Column() {
  Scroll() {
  Column() {
  this.LoginButton()
  }
  }
  .width(Constants.MATCH_PARENT)
  .backgroundColor($r('app.color.app_background'))
  .padding(15)
  }

  @Builder LoginButton() {
    Button($r('app.string.login'))
      .width(Constants.MATCH_PARENT)
      .height(40)
      .borderRadius(20)
      .fontSize(16)
      .margin({ top: 50 })
      .fontWeight(500)
      .enabled(true)
      .fontColor(Color.White)
      .backgroundColor($r('app.color.blue'))
      .onClick(() => {
       
      })
  }
  

• @Extend/@Style：扩展内置组件和封装属性样式，更灵活地组合内置组件。

  @Extend 和 @Style的区别：

  1. 和@Styles不同，@Extend仅支持定义在全局，不支持在组件内部定义。
  2. 和@Styles不同，@Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。
  3. 和@Styles不同，@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。
  4. @Extend装饰的方法的参数可以为function，作为Event事件的句柄。
  5. @Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染。
  6. @Styles方法不支持参数。
  7. @Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。
  8. 定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值。
  9. 组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles，如果找不到，则会全局查找。

  // xxx.ets
  @Extend(Text) function textStyle (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
  }

  // 定义在全局的@Styles封装的样式
  @Styles function globalText() {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
  }

  @Entry
  @Component
  struct ExtendPage {
  build() {
  Row({ space: 10 }) {
  Text('Extend')
  .textStyle(16)

      Text('Style')
        .globalText()
        .fontSize(30)
    }
  }
  

  }

• stateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式。

  stateStyles是属性方法，可以根据UI内部状态来设置样式。ArkUI提供以下四种状态：

  1. focused：获焦状态。
  2. normal：正常状态。
  3. pressed：按压状态。
  4. disabled：不可用状态。

  // @Styles和stateStyles联合使用

  @Entry
  @Component
  struct MyComponent {
  @Styles normalStyle() {
  .backgroundColor(Color.Gray)
  }

  @Styles pressedStyle() {
    .backgroundColor(Color.Red)
  }
  
  build() {
    Column() {
      Text('Text1')
        .fontSize(50)
        .fontColor(Color.White)
        .stateStyles({
          normal: this.normalStyle,
          pressed: this.pressedStyle,
        })
    }
  }
  

  }