【鸿蒙学习笔记】@Styles装饰器：定义组件重用样式

原文链接：@Styles装饰器：定义组件重用样式

[Q&A] @Styles装饰器作用

@Styles 表示公共样式，每个组件都可以复用。如果相同样式在各个组件里复制一遍，会造成代码冗余，难管理。

[Q&A] @Styles装饰器特点

１・当前@Styles仅支持通用属性和通用事件。
２・@Styles方法不支持参数
３・@Styles可以定义在组件内或全局，全局定义时需在方法名前添加function关键字，组件内定义时则不需添加function关键字。

使用场景

// 定义在全局的@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 }) {
      Text('FancyA')
        .globalFancy()  // 使用全局的@Styles封装的样式
        .fontSize(30)
      Text('FancyB')
        .fancy()        // 使用组件内的@Styles封装的样式
        .fontSize(30)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35