ArkTS进阶---修饰器的使用

一、@Extend

用法讲解：@Extend可以让我们在构建组件时，不该改变其原有结构，为其增加一些新的属性或方法，让我们在日常编写中更加方便。

（允许参数传递）

例如：

 

 Column() {
      Text($r('app.string.footer_text'))
        .fontColor(Color.Gray)
        .fontSize($r('app.float.footer_text_size'))
        .width(Const.FULL_WIDTH)
        .height($r('app.float.footer_text_height'))
        .textAlign(TextAlign.Center)
    }

 当组件Text下的属性过多时，我们就可以运用@Extend简化书写。

@Extend(Text)//括号内为组件名称  函数体内为方法或属性
function extend (){
  .fontColor(Color.Gray)
  .fontSize($r('app.float.footer_text_size'))
  .width(Const.FULL_WIDTH)
  .height($r('app.float.footer_text_height'))
  .textAlign(TextAlign.Center)
}

这样即可将源代码简化为，便于查看理解

Column() {
      Text($r('app.string.footer_text'))
        .extend()
    }

二、@Styles

用法讲解：与@Extend相比@Styles不限于具体组件，在@Styles修饰的函数体内可以是任意通用的属性和和方法，注意为通用。像是在对商品卡片的展示中，他们需要统一的背景颜色、字体等格式，这时用@Styles就可以简化开发流程。

（不允许参数传递）

同样的例子：

@Styles   //此时因为函数体内的fontColor  fontSize   textAlign 为Text特有组件，不能书写在函数体中
function styles (){
  //.fontColor(Color.Gray)
  //.fontSize($r('app.float.footer_text_size'))
  .width(Const.FULL_WIDTH)
  .height($r('app.float.footer_text_height'))
  //.textAlign(TextAlign.Center)
}

使用方法同@Extend 

三、@Builder

用法讲解：@Builder与前两个相比拥有更强的独立性，即在@Builder修饰的函数体内，你可以完成对一个组件实例的绝大多数开发内容，甚至把他当做“第二个@Entry”，不仅仅是属性和事件，还有组件。布局都可以在函数体内书写。

（允许参数传递）

还是同样的例子：

@Builder
function builder(){
  Column() {
    Text($r('app.string.footer_text'))
      .fontColor(Color.Gray)
      .fontSize($r('app.float.footer_text_size'))
      .width(Const.FULL_WIDTH)
      .height($r('app.float.footer_text_height'))
      .textAlign(TextAlign.Center)
  }

此时整个框架都可以从主页面中脱离，大大提高了代码的可读性和可复用性。

四、总结：

名称	特点	参数传递
@Extend	抽取指定组件的属性、事件	允许
@Styles	抽取通用属性、事件	不允许
@Builder	抽取整个结构，包括组件及其属性和事件	允许