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