OpenHarmony自定义组件-OpenHarmony安装到电脑

自定义组件

@Builder

可通过@Builder装饰器进行描述，该装饰器可以修饰一个函数，此函数可以在build函数之外声明，并在build函数中或其他@Builder修饰的函数中使用，从而实现在一个自定义组件内快速生成多个布局内容。

@BuilderParam

@BuilderParam装饰器用于修饰自定义组件内函数类型的属性（例如： 复制@BuilderParam noParam: () => void），并且在初始化自定义组件时被@BuilderParam修饰的属性必须赋值。

当开发者在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法，将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题，引入了@BuilderParam装饰器，此装饰器修饰的属性值可为@Builder装饰的函数，开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。

@Styles

ArkTS为了避免开发者对重复样式的设置，通过@Styles装饰器可以将多个样式设置提炼成一个方法，直接在组件声明时调用，通过@Styles装饰器可以快速定义并复用自定义样式。当前@Styles仅支持通用属性。

复制@Styles function globalFancy () { .width(150) .height(100) .backgroundColor(Color.Pink) } ​ Text(坚果) .globalFancy() .fontSize(30)

@Extend

@Extend装饰器将新的属性方法添加到Text、Column、Button等内置组件上，通过@Extend装饰器可以快速地扩展原生组件。注意的是@Extend不能定义在自定义组件struct内。

复制// xxx.ets @Extend(Text) function fancy (fontSize: number) { .fontColor(Color.Red) .fontSize(fontSize) .fontStyle(FontStyle.Italic) .fontWeight(600) } ​ Text(“坚果”) .fancy(24)

@CustomDialog

@CustomDialog装饰器用于装饰自定义弹窗组件，使得弹窗可以动态设置内容及样式。

复制​ @CustomDialog struct DialogExample { controller: CustomDialogController action: () => void ​ build() { Row() { Button(自定义dialog) .onClick(() => { this.controller.close() this.action() }) }.padding(20) } } ​ ​ @Entry @Component struct AboutPage { @State message: string = Hello World dialogController: CustomDialogController = new CustomDialogController({ builder: DialogExample({ action: this.onAccept }), cancel: this.existDialog, autoCancel: true }); onAccept() { console.info(onAccept); } ​ existDialog() { console.info(Cancel dialog!); } ​ build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) .onClick(() => { this.dialogController.open() }) } .width(100%) } .height(100%) } }

审核编辑：汤梓红