HarmonyOS开始玩耍：@Styles装饰器，定义组件重用样式（十一）

夲奋亻Jay

已于 2024-05-27 08:53:49 修改

阅读量612

点赞数 10

CC 4.0 BY-SA版权

分类专栏： HarmonyOS鸿蒙应用文章标签：鸿蒙

于 2024-05-27 08:52:56 首次发布

本文链接：https://blog.youkuaiyun.com/qq_29101285/article/details/139225728

一、@Styles装饰器：定义组件重用样式

如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，我们推出了可以提炼公共样式进行复用的装饰器@Styles。

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

使用规则：

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

// 定义在全局的@Styles封装的样式
@Styles function globalFancy() {
   
   
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}

// 定义在组件内的@Styles封装的样式
@Component
struct FancyUse {
   
   
  @Styles fancy() {
   
   
    .width(150)
    .height(100)
    .backgroundColor(Color.Pink)
  }
}

定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值。

@Component
struct FancyUse {
   
   
  @State heightValue: number = 100
  @Styles fancy() {
   
   
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
   
   
      this.heightValue = 200
    })
  }
}

组件内@Styles的优先级高于全局@Styles。
框架优先找当前组件内的@Styles，如果找不到，则会全局查找。

二、@Extend装饰器：定义扩展组件样式

在前文的示例中，可以使用@Styles用于样式的扩展，在@Styles的基础上，我们提供了@Extend，用于扩展原生组件样式。

@Extend(UIComponentName) function functionName { ... }

使用规则：

和@Styles不同，@Extend仅支持定义在全局，不支持在组件内部定义。
和@Styles不同，@Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。

// @Extend(Text)可以支持Text的私有属性fontColor
@Extend(Text) function fancy () {
   
   
  .fontColor(Color.Red)
}

// superFancyText可以调用预定义的fancy
@Extend(Text) function superFancyText() {
   
   
    .fontSize(18)
    .fancy()
}

12345678910

和@Styles不同，@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。

@Extend(Text) function fancy (fontSize: number) {
   
   
  .fontColor(Color.Red)
  .fontSize(fontSize)
}

@Entry
@Component
struct FancyUse {
   
   
  build() {
   
   
    Row({
    
     space: 10 }) {
   
   
      Text(