ArkTS学习笔记_封装复用之@Styles装饰器

活在生活里

已于 2024-07-14 21:53:41 修改

阅读量391

点赞数 6

分类专栏：鸿蒙开发文章标签：学习笔记前端

于 2024-07-14 21:15:27 首次发布

本文链接：https://blog.csdn.net/SSIrreplaceable/article/details/140423271

版权

鸿蒙开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ArkTS学习笔记_封装复用之@Styles装饰器

背景：
在开发中，如果每个组件的样式都需要单独设置，就会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，给出的思路是：提炼和封装相同的样式成方法，方便复用调用，装饰器@Style孕育而生。
作用:
@Styles装饰器可以将多条样式设置，提炼成一个方法，直接在组件使用的位置调用即可复用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。

一、@Styles装饰器使用说明

当前@Styles仅支持通用属性和通用事件。
@Styles方法不支持参数，反例如下。

// 反例： @Styles不支持参数
@Styles function globalFancy (value: number) {
  .width(value)
}

@Styles可以定义在组件内或全局。
在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。

// 全局，前面添加function关键字
@Styles function functionName() { ... }

// 在组件内
@Component
struct FancyUse {
  // 组件内部，不需要添加function关键字  
  @Styles fancy() {
    .height(100)
  }
  
}

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

@Component
struct FancyUse {
  @State heightValue: number = 100
    
  @Styles fancy() {
    .height(this.heightValue) // 可是使用this指向组件本身，调用组件的状态 
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200 // 可是使用this指向组件本身，给组件的状态赋值 
    })
  }
}

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

二、以下示例中演示了组件内@Styles和全局@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 }) {
        
      Text('FancyA')
        .globalFancy() // 和方法一样，调用使用全局的@Styles封装的样式
        .fontSize(30)
            
      Text('FancyB')
        .fancy() // 和方法一样，使用组件内的@Styles封装的样式
        .fontSize(30)
    }
    
  }
}