OpenHarmony 定义组件重用样式：@Styles 装饰器

作者：OpenHarmony开发者

2023-09-28
北京
本文字数：1057 字
阅读完需：约 3 分钟

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

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

说明：

从 API version 9 开始，该装饰器支持在 ArkTS 卡片中使用。

装饰器使用说明

● 当前 @Styles 仅支持通用属性和通用事件。

● @Styles 方法不支持参数，反例如下。

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

复制代码

● @Styles 可以定义在组件内或全局，在全局定义时需在方法名前面添加 function 关键字，组件内定义时则不需要添加 function 关键字。

// 全局@Styles function functionName() { ... }
// 在组件内@Componentstruct FancyUse {  @Styles fancy() {    .height(100)  }}

复制代码

● 定义在组件内的 @Styles 可以通过 this 访问组件的常量和状态变量，并可以在 @Styles 里通过事件来改变状态变量的值，示例如下：

@Componentstruct 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@Componentstruct 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)    }  }}

复制代码

发布于: 刚刚阅读数: 5

OpenHarmony开发者

关注

OpenHarmony开发者官方账号 2021-12-15 加入

OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展

发布

暂无评论

创作场景

OpenHarmony 定义组件重用样式：@Styles 装饰器

装饰器使用说明

使用场景

OpenHarmony开发者

评论