美文网首页鸿蒙
@Styles装饰器:定义组件重用样式

@Styles装饰器:定义组件重用样式

作者: wendy__xu | 来源:发表于2024-03-07 18:12 被阅读0次

    装饰器使用说明

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

    只能在当前文件内使用,不支持export。

    使用场景

    // 定义在全局的@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 }) {
          // 使用全局的@Styles封装的样式
          Text('FancyA')
            .globalFancy()
            .fontSize(30)
          // 使用组件内的@Styles封装的样式
          Text('FancyB')
            .fancy()
            .fontSize(30)
        }
      }
    }
    

    相关文章

      网友评论

        本文标题:@Styles装饰器:定义组件重用样式

        本文链接:https://www.haomeiwen.com/subject/datezdtx.html