ArkTS @Styles装饰器的用法（附带实例）

在开发过程中，不可避免地要写一些样式来设置元素的展示形态，比如字体的粗细、图片的大小等，但是会有很多重复的样式。

面对这些重复的样式，我们没有必要去粘贴复制。为了代码的简洁性和后续维护的便利性，可以提炼出一些公共样式进行复用，这时就会用到 @Styles 装饰器了。

在使用 @Styles 装饰器之前，需要明确以下几点：

• @Styles 装饰器仅支持通用属性和通用事件。
• @Styles 方法不支持参数。
• @Styles 可以定义为全局，也可以定义在组件内，定义成全局时需要在方法名前面添加 function 关键字，组件内则不需要添加 function 关键字。
• @Styles 关键字不支持 export 导出，只能在当前文件内使用。

@Styles 装饰器的使用方法如下：

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

ArkTS @Styles装饰器使用案例

@Styles 装饰器的示例代码如下：

// 定义一个全局的通用样式
@Styles function globalStyles() {
  .width(300)
  .height(200)
  .backgroundColor('#ff0000')   // 红色
  .margin(10)
  .padding(10)
}

@Entry
@Component
struct Demo_Styles {
  // 定义组件内的通用样式
  @Styles myStyles() {
    .width(300)
    .height(200)
    .backgroundColor('#0000ff') // 蓝色
    .margin(10)
    .padding(10)
  }

  build() {
    Column() {
      // 使用全局样式
      Text('这是全局样式')
        .globalStyles()
        .fontSize(20)

      // 组件内的样式
      Text('组件内的样式')
        .myStyles()
        .fontColor('#ffffff')
        .width('100%')
        .height('100%')
    }
  }
}

在上述示例代码中，分别定义了全局的 Styles 函数封装和组件内的函数封装。无论是全局的还是组件内的，只需在函数中使用“.属性名：属性”的格式即可。在使用过程中，直接将其当作普通的属性使用即可，同时也可以为当前的UI组件添加其他的一些样式。

效果如下图所示：