#鸿蒙通关秘籍#在HarmonyOS NEXT中如何通过@Extend扩展组件以重复使用样式和事件？

在HarmonyOS NEXT中，通过@Extend可以扩展组件。这样可以添加可复用的样式和事件。

import text from '@ohos.graphics.text';
@Extend(Text)
function textExtend(backgroundColor: ResourceColor,text: string){
  .textAlign(TextAlign.Center)
  .backgroundColor(backgroundColor)
  .fontColor(Color.Red)
  .fontSize(22)
  .width('100%')
  .onClick(() => {
    AlertDialog.show({
      message: text
    })
  })
}
@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('1111')
        .textExtend(Color.Blue,'1111')
      Text('2222')
        .textExtend(Color.Green,'2222')
    }
  }
}

通过@Extend，不仅可以简化布局代码，还要注意它会影响到扩展的整个页面组件。