HarmonyOS NEXT - 样式装饰器：@Styles和@Extend

Question

如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，推出了可以提炼公共样式进行复用的装饰器@Styles。

@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。

@Styles装饰器：定义组件重用样式
@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。

@Styles装饰器缺点：

@Styles仅支持通用属性和通用事件。
@Styles方法不支持参数

@Styles装饰器限制条件：

@Styles方法不能有参数，编译期会报错，提醒开发者@Styles方法不支持参数。
@Styles方法内不支持使用逻辑组件，在逻辑组件内的属性不生效。

@Extend用于扩展原生组件样式

@Extend(UIComponentName) function functionName { ... }

@Extend仅支持在全局定义，不支持在组件内部定义
@Extend装饰的方法支持参数

@Extend使用规则

@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。
@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。
@Extend装饰的方法的参数可以为function，作为Event事件的句柄。
@Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染。

@Extend限制条件
@Extend仅支持在全局定义，不支持在组件内部定义。

代码实例

@Entry
@Component
struct StylesPage {
  @State message: string = '@Styles And @Extend';

  @Styles
  reuseStyle(){
    .backgroundColor(Color.Orange)
    .width(200)
    .margin(10)
    // .fontSize(20)
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Text('1').reuseStyle()
      Text('2').reuseStyle()
      Text('3').reuseStyle()

      Text('a').textStyle(100)
      Text('b').textStyle(150)
      Text('c').textStyle(200)
    }
    .height('100%')
    .width('100%')
  }
}

@Extend(Text)
function textStyle(w:number){
  .width(w)
  .backgroundColor(Color.Green)
  .margin(10)
  .fontSize(20)
}

@Styles和stateStyles联合使用
@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,
        })
    }
  }
}

stateStyles可以通过this绑定组件内的常规变量和状态变量

@Entry
@Component
struct CompWithInlineStateStyles {
  @State focusedColor: Color = Color.Red;
  normalColor: Color = Color.Green

  build() {
    Column() {
      Button('clickMe').height(100).width(100)
        .stateStyles({
          normal: {
            .backgroundColor(this.normalColor)
          },
          focused: {
            .backgroundColor(this.focusedColor)
          }
        })
        .onClick(() => {
          this.focusedColor = Color.Pink
        })
        .margin('30%')
    }
  }
}