@Styles 装饰器

原创于 2025-09-13 19:55:59 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙系统

@Styles 装饰器
         UI 修饰类装饰器的一种
   作用:提取公共样式
分类
         私有: 定义在当前 struct 内，只有当前 struct 内可以使用→

共有:定义在当前文件内，当前文件内的所有struct都可以使用
区别:
私有:不需要 function 关键字
共有:需要 function 关键字书写:
不管是共有还是私有，只要被 @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)
    }
  }
}