HarmonyOS/OpenHarmony应用开发-ArkTS语言@Builder自定义构建函数

本文介绍了HarmonyOS的ArkUI中@Builder装饰器的使用,包括自定义组件内和全局自定义构建函数的定义与调用规则,并详细阐述了参数传递的按值和按引用原则,帮助开发者更好地理解和利用这一功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ArkUI还提供了一种更轻量的UI元素复用机制@Builder,@Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。

为了简化语言,我们将@Builder装饰的函数也称为“自定义构建函数”。

说明,从API version 9开始,该装饰器支持在ArkTS卡片中使用。

一、装饰器使用说明

1.自定义组件内自定义构建函数

定义的语法:

@Builder myBuilderFunction({ ... })

使用方法:

this.myBuilderFunction({ ... })

允许在自定义组件内定义一个或多个自定义构建函数,该函数被认为是该组件的私有、特殊类型的成员函数。

自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用,但不允许在组件外调用。

在自定义函数体中,this指代当前所属组件,组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。

2.全局自定义构建函数

定义的语法:

@Builder function MyGlobalBuilderFunction({ ... })

使用方法:

MyGlobalBuilderFunction()

全局的自定义构建函数可以被整个应用获取,不允许使用this和bind方法。

如果不涉及组件状态变化,建议

在使用ArkTS(一款基于TypeScript的语法糖,用于增强JavaScript开发体验的工具)和HarmonyOS(鸿蒙系统)开发过程中,我们可以创建一个带`@Builder`装饰器的函数来动态改变字体大小。首先,假设我们有一个名为`TextComponent`的组件,它有`fontSize`属性,并且我们已经安装了`@antv/x-component`库来支持UI构建。 ```typescript import { Component } from '@antv/x-component'; import { build as buildWithAntv } from '@antv/x-component/lib/builder'; // 创建一个带有 @Builder 装饰器的 TextComponent 类 class TextComponent extends Component { static displayName = 'TextComponent'; @buildWithAntv({ alias: 'text', // 元素名称 properties: { fontSize: { type: Number, default: 30 }, // 字体大小,默认值为30 }, }) setFontSize(fontSize: number) { this.set('fontSize', fontSize); } } // 页面中使用这个组件并调用setFontSize三次 const myText1 = new TextComponent({ text: '文本1' }); myText1.setFontSize(50); // 第一次点击按钮后的操作 const myText2 = new TextComponent({ text: '文本2' }); myText2.setFontSize(50); // 第二次点击按钮后的操作 const myText3 = new TextComponent({ text: '文本3' }); myText3.setFontSize(50); // 第三次点击按钮后的操作 // 将这些组件添加到页面上 document.body.appendChild(myText1.render()); document.body.appendChild(myText2.render()); document.body.appendChild(myText3.render()); // 模拟点击按钮事件 function handleClick() { const buttons = document.querySelectorAll('.change-font-size'); buttons.forEach(button => button.addEventListener('click', () => { buttons.forEach(b => b.textContent = (b.textContent === '30' ? '50' : '30')); })); } handleClick(); // 初始化显示为30,点击后切换 ``` 在这个例子中,`@Builder`装饰器帮助我们在构造函数之外设置属性值。然后,通过在页面上实例化三个`TextComponent`并分别调用`setFontSize`方法,实现了字体大小的动态更改。当点击模拟的按钮时,按钮的文字会切换,表明字体大小发生了变化。 请注意,这只是一个简化的示例,实际项目中可能需要处理更多细节,如事件监听、状态管理等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值