鸿蒙装饰器之样式与结构重用@Style@Bulid@Extend

@Extend

通过 Extend 可以扩展组件的样式、事件,实现复用效果

@Extend仅支持在全局定义，不支持在组件内部定义。

语法：@Extend(组件名) 
function functionName(参数1....) {
  .属性()
  .事件(()=>{})
}

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

@Extend (Text)
function myExtend(){
  .width(100)
  .height(100)
  .backgroundColor(Color.Pink)
  .margin({bottom:50})
  .onClick(()=>{
    AlertDialog.show({
      message:'hello'
    })
  })
}
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text()
        .myExtend()
      Text()
        .myExtend()
    }
  }
}

@Style

@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。

不同于@Extend 用来给某个组件扩展，@Styles 可以抽取 通用的事件和属性。

语法：

// 全局定义
@Styles function functionName() {
  .通用属性()
  .通用事件(()=>{})
}

@Component
struct FancyUse {
  // 在组件内定义
  @Styles fancy() {
      .通用属性()
      .通用事件(()=>{})
  }
}

// 使用
组件().fancy()
组件().functionName()

// 全局定义
@Styles function setSize() {
  .width(100)
  .height(100)
  .onClick(()=>{
    // 逻辑略
  })
}
@Entry
@Component
struct Index {
  // 在组件内定义
  @Styles setBg() {
    .backgroundColor(Color.Red)
  }
  build() {
    Column() {
      Text()
        .setSize()
        .setBg()
    }
  }
}

@Build

ArkUI提供了一种轻量的UI元素复用机制@Builder，该自定义组件内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。

 如果连结构也需要抽取，就可以使用@Builder，他也可以叫做自定义构建函数

语法：

// 自定义 全局 构建函数
@Builder function MyGlobalBuilderFunction(param1,param2...) {
  // 结构、属性、事件放这里
}
// 使用
MyGlobalBuilderFunction(param1,param2...)

// 自定义 组件内 构建函数
@Builder MyBuilderFunction( param1,param2...) {
  // 结构、属性、事件放这里
}
// 使用
this.MyBuilderFunction(param1,param2...)

//定义全局 Builder
@Builder
function GlobalTextItem(title: string) {
  Text(title)
    .fontSize(30)
    .onClick(() => {
      // 逻辑略
    })
}
@Entry
@Component
struct Index {
  @State message: string = '@Builder';
  build() {
    Column() {
      // 使用全局 Builder
      GlobalTextItem('你好')
      // 使用本地 Builder
      this.LocalTextItem('西兰花炒蛋')
    }
    .width('100%')
    .height('100%')
  }
  //定义本地 Builder
  @Builder
  LocalTextItem(title: string) {
    Text(title)
      .fontSize(30)
      .onClick(() => {
        // 逻辑略
      })
  }
}

总结：

extend与build可以进行传参，而style则不能进行传参

extend抽取 特定组件 样式、事件

style抽取 公共样式、事件

build抽取 结构、样式、事件