@Extend

语法

只能放在全局

@Extend(扩展组件)
function 方法名(参数) {
    具体的扩展
}

例子

下面为一个Text组件做扩展，调用扩展的文字就会直接有字体大小和颜色

@Extend(Text)
function fontSizeAndColor() {
  .fontSize(30)
  .fontColor("#323843")
}

build() {
    Text("哈哈哈哈哈哈").fontSizeAndColor()
}

也可以扩展一个带参数的

@Extend(Text)
function fontSizeAndColor(size: number) {
  .fontSize(size)
  .fontColor("#323843")
}

build() {
    Text("哈哈哈哈哈哈").fontSizeAndColor(40)
}

@Styles

作用

抽取通用属性、事件

语法

1、当前仅支持通用属性和通用事件，且不支持传参
2、可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。
3、全局定义的不可以使用成员变量，组内定义的可以使用成员变量
4、组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles，如果找不到，则会全局查找。
5、只能在当前文件内使用，不支持export

全局定义

@Styles
function 方法名() {
 // 通用属性、事件
}

组内定义

@Styles
方法名() {
   // 通用属性、事件
  }

例子

全局定义

@Styles
function CommonStyles() {
  .width(80)
  .height(100)
  .backgroundColor(Color.Red)
}

@Component
export struct HomePage {
  build() {
     Text("哈哈哈哈哈哈").CommonStyles()
  }
}

组内定义

@Component
export struct HomePage {

@State bgColor: Color = Color.Gray

@Styles
CommonStyles() {
    .width(80)
    .height(100)
    .backgroundColor(this.bgColor)
    .onClick(() => {
      this.bgColor = Color.Red
    })
  }

  build() {
     Text("哈哈哈哈哈哈").CommonStyles()
  }
}

@Builder

作用

自定义构建函数（结构、样式、事件）

语法

1、可以使用封装结构、样式、事件，且支持参数传参
2、可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。
3、全局定义的不可以使用成员变量，组内定义的可以使用成员变量，组内定义的调用时需要用this.来调用
4、用参数传参的时候，即使传递的是状态变量，也只能在第一次生效，后面再更改状态变量值，@Builder内部的UI是不会刷新的。

全局定义

@Builder
function 方法名(参数) {
 // 结构、样式、事件
}

组内定义

@Builder
方法名(参数) {
    // 结构、样式、事件
  }

例子

全局定义

@Builder
function itemBuilder(bgColor: ResourceColor) {
   Column() {
     Text("第一行")
     Text("第二行")
   }.backgroundColor(bgColor)
}

@Component
export struct HomePage {
  build() {
     itemBuilder(Color.Red)
  }
}

组内定义

@Component
export struct HomePage {

@State title: string = "我是标题"

@Builder
itemBuilder(bgColor: ResourceColor) {
  Column() {
    Text(this.title)
    Text("第二行")
  }.backgroundColor(bgColor)
}

  build() {
     this.itemBuilder(Color.Red)
  }
}