第五讲_ArkTS装饰器(二)

ArkTS装饰器(二)

  • 1. @Styles装饰器
    • 1.1 组件内的@Styles
    • 1.2 全局的@Styles
    • 1.3 @Styles注意事项
  • 2. @Extend装饰器

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

你可能感兴趣的:(harmonyos应用开发,ArkTS,HarmonyOS)