装饰器使用心得

@Builder装饰器

为了防止大量重复的代码，我们可以将相同的UI结构封装在@Builder装饰器里，完成UI结构的复用。

@Builder装饰器传值分为值传递和引用传递，值传递状态变量的改变不会引起@Builder方法内的UI刷新，引用传递则可以引起@Builder方法内的UI刷新

/*想要实时通过@build修改内容，我们采用$$来将传入参数变为引用传递的方式，使其可以在点击后正确的修改内容
同时在5.0ide里我们必须自定义一个class或者interface将数据封装否则会报错如下
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  @Builder
  do($$: {param: string }) {   //会报错Object literals cannot be used as type declarations
    Text($$.param)
  }
  build(){
    Column(){
      this.do({param:this.message})
      Button().onClick(()=>{
        this.message="change"
      })
    }
  }
}
 */
class a{
   msg:string="123"
}
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @Builder do($$:a) {
  Column() {
    Text($$.msg)
  }
}
  build() {
    Column(){
      //把this.message通过引用传递的方式传给do组件
      this.do({ msg:this.message} );
      Button().onClick(()=>{
        this.message="change";
      })
    }
  }
}

@Styles和@Extend装饰器

同样为了代码的复用我们引入了@Styles和@Extend装饰器

@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。@Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字

@Extend用于扩展原生组件样式且仅支持在全局定义，不支持在组件内部定义。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  handleClick() {
    this.message = '已点击';
  }
  @Styles textstyle() //只能支持通用的属性和通用的事件 也可以定义全局的样式 其不支持传参使样式动态变化
  { .width(100)
    .height(100)
  }
  build() {
    Column() {
      Text("hello world")
        .textstyle() //调用Styles定义样式
      Text(this.message)
      Button()
        .button(this.handleClick.bind(this))  //在函数作用域里无法使用this.handleClick()调用这个函数，我们采用this.handleClick并利用bind绑定this实现组件内的动态刷新

    }
  }
}
/*extend装饰器只能定义为全局的   格式为@Extend(组件名) function 函数名(){}
extend装饰器支持通过传参动态改变样式,私有属性的定义，以及可以将事件抽象出来作为句柄
 */
@Extend(Button) function button(onClick: () => void){
  .fontSize(10)
  .onClick(onClick)
}