OpenHarmony开发者论坛

标题: 装饰器使用心得 [打印本页]

作者: 深开鸿_覃贞庆 时间: 2024-11-16 23:12
标题: 装饰器使用心得
[md]# @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)
}
```
[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)