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