鸿蒙ArkTS语言学习（五）：扩展（函数）@Extend@Styles@Builder

news2024/11/15 9:16:27

如何实现结构、样式复用呢？

@Extend：扩展组件（样式、事件）

在这里插入图片描述

作用：将相同组件复用的属性结构抽取封装，将不同的结构通过传入参数进行修改。

1. 定义语法
@Extend(组件名) function 函数名{ ... }
2. 调用
组件名.函数名（参数...）
3. 例子：
@Extend(Text) function fancy (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
  .onclick(()=>{})
}
Text('Fancy')
 .fancy(16)
Text('Fancy')
  .fancy(24)

@Extend仅支持在全局定义，不支持在组件内部定义。只能在当前文件内使用，不支持export。
@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。
@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。
@Extend装饰的方法的参数可以为function，作为Event事件的句柄。???
@Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染。

@Styles：抽取通用属性、事件

不同的组件具有通用的属性或事件，将通用的属性或事件抽取出来进行封装。

// 全局
@Styles function functionName() { ... }

// 在组件内；尤其是利用this时一定要定义在组件内
@Component
struct FancyUse {
  @Styles fancy() {
    .height(100)
  }
}

当前@Styles仅支持通用属性和通用事件。
@Styles方法不支持参数
@Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。只能在当前文件内使用，不支持export。
定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值
组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles，如果找不到，则会全局查找。

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

除了组件、样式、事件外，还可以封装结构。结构的复用。用于封装相似的结构。
在这里插入图片描述

可以全局也可以局部。

//全局自定义构建函数
定义的语法：
@Builder function MyGlobalBuilderFunction() { ... }
使用方法：
MyGlobalBuilderFunction()
如果不涉及组件状态变化，建议使用全局的自定义构建方法。

//局部
定义的语法：
@Builder MyBuilderFunction() {}
使用方法：
this.MyBuilderFunction()