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

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

• 背景：
  有时候我们封装组件的样式，不想所有的组件都可以调用，只想给某个组件单独使用，@Extend装饰器孕育而生。

• 作用：
  和@Styles装饰器一样，可以将多条样式（属性、事件等）提炼成一个方法，直接在组件使用的位置调用即可复用。 @Extend装饰器和Styles装饰器可以高低搭配使用，Styles装饰器管大方向的组件样式封装，@Extend装饰器管小方向（特定组件）的样式封装。

一、@Extend装饰器和Styles装饰器的区别

1. @Styles仅支持通用属性和通用事件；@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。
2. @Styles可以定义在组件内或全局中；@Extend仅支持定义在全局中。
3. @Styles方法不支持参数；@Extend装饰的方法支持参数。

一、@Extend装饰器使用说明

@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。

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

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

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

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

@Entry
@Component
struct FancyUse {
  build() {
    Row({ space: 10 }) {
      Text('Fancy')
        .fancy(16)  // 调用封装的样式方法，并传入参数 16
            
      Text('Fancy')
        .fancy(24)  // 调用封装的样式方法，并传入参数 24
    }
  }
}

@Extend装饰的方法的参数可以为function，作为Event事件的句柄。

// 封装一个样式
@Extend(Text) function makeMeClick(onClick: () => void) {
  .backgroundColor(Color.Blue)
  .onClick(onClick)
}

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World';

  // 封装的点击事件
  onClickHandler() {
    this.label = 'Hello ArkUI';
  }

  build() {
    Row({ space: 10 }) {
        
      Text(`${this.label}`)
        .makeMeClick(this.onClickHandler.bind(this)) // 调用封装的样式，并传入事件的句柄
   
    }
  }
}

@Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染。

// 封装一个样式
@Extend(Text) function fancy (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
}

@Entry
@Component
struct FancyUse {
  @State fontSizeValue: number = 20
  build() {
    Row({ space: 10 }) {
        
      Text('Fancy')
        .fancy(this.fontSizeValue)  // 调用封装的样式，并传入状态变量
        .onClick(() => {
          this.fontSizeValue = 30
        })
            
    }
  }
}

二、使用场景实例

没有对重复样式进行封装的使用例子：

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(100)
        .backgroundColor(Color.Blue)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(200)
        .backgroundColor(Color.Pink)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(300)
        .backgroundColor(Color.Orange)
    }.margin('20%')
  }
}

对重复样式进行封装，并使用的例子：

// 抽出重复的样式，进行封装
@Extend(Text) function fancyText(weightValue: number, color: Color) {
  .fontStyle(FontStyle.Italic)
  .fontWeight(weightValue)
  .backgroundColor(color)
}

@Entry
@Component
struct FancyUse {
    @State label: string = 'Hello World'

    build() {
        Row({ space: 10 }) {
            Text(`${this.label}`)
                .fancyText(100, Color.Blue) // 调用样式方法
            Text(`${this.label}`)
                .fancyText(200, Color.Pink) // 调用样式方法
            Text(`${this.label}`)
                .fancyText(300, Color.Orange) // 调用样式方法
        }.margin('20%')
    }
}