关于openharmony:OpenHarmony定义组件重用样式Styles装饰器

如果每个组件的款式都须要独自设置，在开发过程中会呈现大量代码在进行反复款式设置，尽管能够复制粘贴，但为了代码简洁性和后续不便保护，咱们推出了能够提炼公共款式进行复用的装璜器 @Styles。

@Styles 装璜器能够将多条款式设置提炼成一个办法，间接在组件申明的地位调用。通过 @Styles 装璜器能够疾速定义并复用自定义款式。用于疾速定义并复用自定义款式。

阐明：

从 API version 9 开始，该装璜器反对在 ArkTS 卡片中应用。

装璜器应用阐明

● 以后 @Styles 仅反对通用属性和通用事件。

● @Styles 办法不反对参数，反例如下。

// 反例：@Styles 不反对参数
@Styles function globalFancy (value: number) {.width(value)
}

● @Styles 能够定义在组件内或全局，在全局定义时需在办法名后面增加 function 关键字，组件内定义时则不须要增加 function 关键字。

// 全局
@Styles function functionName() { ...}

// 在组件内
@Component
struct FancyUse {@Styles fancy() {.height(100)
  }
}

// 全局
@Styles function functionName() { …}

// 在组件内
@Component
struct FancyUse {@Styles fancy() {.height(100)
  }
}

● 定义在组件内的 @Styles 能够通过 this 拜访组件的常量和状态变量，并能够在 @Styles 里通过事件来扭转状态变量的值，示例如下：

@Component
struct FancyUse {
  @State heightValue: number = 100
  @Styles fancy() {.height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {this.heightValue = 200})
  }
}

● 组件内 @Styles 的优先级高于全局 @Styles。框架优先找以后组件内的 @Styles，如果找不到，则会全局查找。

应用场景

以下示例中演示了组件内 @Styles 和全局 @Styles 的用法。

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

@Entry
@Component
struct FancyUse {
  @State heightValue: number = 100
  // 定义在组件内的 @Styles 封装的款式
  @Styles fancy() {.width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {this.heightValue = 200})
  }

  build() {Column({ space: 10}) {
      // 应用全局的 @Styles 封装的款式
      Text('FancyA')
        .globalFancy ()
        .fontSize(30)
      // 应用组件内的 @Styles 封装的款式
      Text('FancyB')
        .fancy()
        .fontSize(30)
    }
  }
}