在鸿蒙开发中直接定义一个普通函数，其往往无法实现样式或结构的复用，其无法抽取属性或内容组件。 此时就需要特殊的修饰器修饰下的函数来实现该功能，如@Extend、@Styles、@Builder修饰器。而这三个修饰器其使用方法也有所区别。

说人话就是普通函数没法存放宽度高度颜色事件以及容器组件等，而被不同修饰器修饰过的函数，可以提前存放某些属性或者是事件等，甚至存放一整个组件。什么时候想用了，直接给过去。

把相同的东西整合起来，想做同样样式的东西，只需要把不同的东西填一下就可以。

比如做这个界面，把需要重复填写的属性抽取出来，用的时候直接给函数，只需要改文字和图片就可以。

三个修饰器有所差别，下面通过实现一个重复样式的三个数字界面来学习三个修饰器的用法。

（要求：字体大小：50；背景颜色：黄；字体颜色：白；宽高：80；文字居中；点击出现弹窗‘hahaha’）

一.@Extend

只能定义在全局

// 定义在全局
@Extend(组件名) 
function functionName(参数1....) {
  .属性()
  .事件(()=>{})
}


// 使用
组件(){}
  .functionName(参数1...)

@Extend可以抽取指定组件（如Text Image Button）的属性和事件

具体用法如下：被@Extend修饰的函数只能装所指定组件的样式和事件，使用时直接像用属性一样 . 函数名就可以

//定义可以重写的样式函数fn()
@Extend(Text)
function fn(){
//字体大小：50；背景颜色：黄；字体颜色：白；宽高：80；文字居中；点击出现弹窗‘hahaha’
  .fontSize(50)
  .backgroundColor(Color.Yellow)
  .fontColor(Color.White)
  .width(80)
  .height(80)
  .textAlign(TextAlign.Center)
  .onClick(()=>{
    AlertDialog.show({message:'hahaha'})
  })
}

@Entry
@Component
struct Index {

  build() {

    Row() {
      Text('1')
        //引用时 .+函数名
        .fn()
      Text('2')
        .fn()
      Text('3')
        .fn()

    }
    //设置交叉轴方向对齐方式
    .justifyContent(FlexAlign.SpaceBetween)
    .height('100%')
    .width('100%')
  }
}

二.@Styles

@Styles可以抽取通用的属性和事件，即所有组件都能用的如宽度高度背景色点击事件这种通用属性事件

语法：在全局使用和组件内使用略有不同，在全局使用需要加function,但是组件内不需要加function。 

@Entry
@Component
struct Index {
  //定义可以重写的样式函数fn()
  @Styles fn(){
  //字体大小：50；背景颜色：黄；字体颜色：白；宽高：80；文字居中；点击出现弹窗‘hahaha’
  .backgroundColor(Color.Yellow)
  .width(80)
  .height(80)
  .onClick(()=>{
    AlertDialog.show({message:'hahaha'})
  })
}
  build() {
    Row() {
      Text('1')
        //被@Style 修饰的函数只能装通用属性
        .fn()
        //以下为文本特有的属性 非通用属性 @Style无法装
        .fontSize(50)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
      Text('2')
        .fn()
        .fontSize(50)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
      Text('3')
        .fn()
        .fontSize(50)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)

    }
    //设置交叉轴方向对齐方式
    .justifyContent(FlexAlign.SpaceBetween)
    .height('100%')
    .width('100%')
  }
}

三.@Builder

@Builder不仅可以抽取任何属性事件，甚至可以抽取组件，抽取一整个结构，基本上能抽的都能抽的出来，开发时为了提高代码的可读性和可调试性大量使用@Builder抽取结构。

语法：在全局使用和组件内使用略有不同，在全局使用需要加function,但是引用的时候可以直接用函数名引用，但是组件内需要this.函数名。

@Entry
@Component
struct Index {
  //定义可以重写的样式函数fn()
  @Builder fn(text:string){
    Text(text)
      //字体大小：50；背景颜色：黄；字体颜色：白；宽高：80；文字居中；点击出现弹窗‘hahaha’
      .fontSize(50)
      .backgroundColor(Color.Yellow)
      .fontColor(Color.White)
      .width(80)
      .height(80)
      .textAlign(TextAlign.Center)
      .onClick(()=>{
        AlertDialog.show({message:'hahaha'})
      })
  }
  build() {
    Row() {
      this.fn('1')
      this.fn('2')
      this.fn('3')
    }
    //设置交叉轴方向对齐方式
    .justifyContent(FlexAlign.SpaceBetween)
    .height('100%')
    .width('100%')
  }
}