门户网站制作的公司,如何转移网站,网站后台怎样登陆,专业长沙做网站公司目录 文章声明⭐⭐⭐让我们开始今天的学习吧#xff01;Builder装饰器#xff1a;自定义构建函数Builder介绍Builder使用说明自定义组件中创建自定义构建函数全局自定义构建函数 Builder参数传递规则按引用传递参数按值传递参数 文章声明⭐⭐⭐
该文章为我#xff08;有编程… 目录 文章声明⭐⭐⭐让我们开始今天的学习吧Builder装饰器自定义构建函数Builder介绍Builder使用说明自定义组件中创建自定义构建函数全局自定义构建函数 Builder参数传递规则按引用传递参数按值传递参数 文章声明⭐⭐⭐
该文章为我有编程语言基础非编程小白的 HarmonyOS自学笔记此类文章笔记我会默认大家都学过前端相关的知识知识来源为 HarmonyOS官方文档归纳为自己的语言与理解记录于此不出意外的话我大抵会 持续更新想要了解前端开发技术栈大致有Vue2/3、微信小程序、uniapp、HarmonyOS、NodeJS、Typescript与Python的小伙伴可以关注我谢谢大家 让我们开始今天的学习吧
Builder装饰器自定义构建函数
Builder介绍
常规的自定义组件只进行数据相关的传递而被Builder装饰器所修饰的方法是一个将UI元素抽象化的方法可以在自定义组件的 build() 函数中使用从而可以做到使用方法来创建UI元素的操作 Builder使用说明
自定义组件中创建自定义构建函数
语法如下
Builder MyBuilderFunction1() {...} // 此处的MyBuilderFunction1为方法名使用方法如下
this.MyBuilderFunction1()需要注意的地方
自定义组件中可以定义多个自定义构建函数即被 Builder 修饰的方法在自定义组件中自定义构建函数被认为是该组件的私有、特殊类型的成员函数自定义构建函数可以在自定义组件中的 Builder() 函数中调用但在自定义组件外不可使用因为上一条注意点说了是私有的在自定义构建函数的函数体中this指代当前所属的自定义组件自定义组件中的状态变量可以在自定义构建函数内访问建议通过this访问自定义组件的状态变量而不是参数传递
全局自定义构建函数
语法如下
Builder function MyBuilderFunction2() {...} // 此处的MyBuilderFunction2为方法名使用方法如下
MyBuilderFunction2()需要注意的地方
全局的自定义构建函数可以被整个应用获取不允许使用this和bind方法如果不涉及组件状态变化建议使用全局的自定义构建方法 Builder参数传递
规则
不允许传递undefined、null为参数在自定义构建函数的函数体内不允许改变参数的值在自定义构建函数的函数体内UI语法必须遵循UI语法规则
按引用传递参数
按引用传递参数时传递的参数可为状态变量且状态变量的改变会引起Builder方法内的UI刷新
格式如下
// 创建时
Builder MyBuilder1( $$ : { param1: string, param2 : string } ) {Text($$.param1);Text($$.param2);
};
// 调用时
MyBuilder({param1:...,param2:...})实例演示
Builder function MyBuilder($$: { str: string }) {Text($$.str)
}Entry
Component
struct MyComponent {State name: string Richie;build() {Column() {MyBuilder({ str: this.name });Divider();Button(更改姓名).onClick(() {this.name Taylor}).margin({ top: 100 })}}
}点击按钮后UI刷新了
按值传递参数
调用Builder装饰的函数默认按值传递当传递的参数为状态变量时状态变量的改变不会引起Builder方法内的UI刷新所以当使用状态变量的时候推荐使用按引用传递
格式如下
// 创建时
Builder MyBuilder1(param1: string, param2 : string) {Text(param1);Text(param2);
};
// 调用时
MyBuilder(Richie,Taylor)实例演示
Builder function MyBuilder(param1:string) {Text(param1);
}Entry
Component
struct MyComponent {State name: string Richie;build() {Column() {MyBuilder(this.name);Divider();Button(更改姓名).onClick(() {this.name Taylor}).margin({ top: 100 })}}
}点击按钮后UI没有刷新
