第五讲_ArkTS装饰器（二）

1. @Styles装饰器

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

1.1 组件内的@Styles

@Entry
@Component
struct FirstComponent {
   
  // 定义一个@Styles样式方法
  @Styles MyStyles() {
   
    .width(100)
    .height(100)
    .backgroundColor(Color.Red)
  }

  build() {
   
    Column() {
   
      Text("使用组件内的@Styles样式")
        // 使用@Style样式方法
        .MyStyles()
    }
  }
}

1.2 全局的@Styles

@Entry
@Component
struct FirstComponent {
   
  
  build() {
   
    Column() {
   
      Text("使用全局的@Styles样式")
        // 使用全局的@Styles样式方法
        .MyGlobalStyles()
    }
  }
}

// 定义全局全局的@Styles需要添加function关键字
// 定义全局的@Styles样式方法
@Styles function MyGlobalStyles() {
   
  .width(100)
  .height(100)
  .backgroundColor(Color.Red)
}

1.3 @Styles注意事项

1. 当前@Styles仅支持通用属性和通用事件。
2. @Styles方法不支持参数。
3. 组件内@Styles的优先级高于全局@Styles。
4. 框架优先找当前组件内的@Styles，如果找不到，则会全局查找。

2. @Extend装饰器

@Extend装饰器给指定的组件封装样式方式。@Extend装饰器与@Styles装饰器的不同：

1. @Extend仅支持定义在全局，不支持在组件内部定义。
2. @Extend支持封装指定的组件的私有属性和私有事件。
3. @Extend装饰的方法支持参数。

@Entry
@Component
struct FirstComponent {
   

  build() {
   
    Column() {
   
      Text("使用@Exteng定义的样式方法")
        // 使用样式方法
        .MyStyles()
    }
  }
}

// @Extend给Text组件定义一个样式方法
@Extend(Text) function MyStyles() {
   
  .width(100)
  .height(100)
  .backgroundColor(Color.Red)
}