网站备案去哪里办理_长沙优化科技有限公司电话_查企业信息查询平台_网络营销就业前景和薪水

@Builder装饰器

概念

• 自定义构建函数
• ArkUI提供了一种轻量的UI元素复用机制@Builder，其内部UI结构固定，仅与使用方进行数据传递
• @Builder所装饰的函数遵循build( ) 函数语法规则
• 开发者可以将重复使用的UI元素抽象成一个方法，在build中进行调用
• 我们将@Builder装饰的函数也成为“自定义构建函数”

使用说明

私有自定义构建函数

1. 允许在自定义组件内定义一个或者多个@Builder方法，该方法被认为是该组件私有，特殊类型的成员函数
2. 私有自定义构建函数（@Builder）可以在所属组件的build方法和其他自定义构建函数（@Builder）中调用
3. 不允许在组件外部调用
4. 在自定义函数体中，this指向当前所属组件，组件的状态变量可以在自定义构建函数内访问
5. 建议通过this访问自定义组件的状态变量，不是通过参数传递

@Entry
@Componentstruct test_page01{@State message:string = 'nihao'@Buildertext_dis(){Column(){Text(this.message).fontSize(20)}}build() {Column({space:20}){this.text_dis()Button('点击改变').onClick(()=>{this.message = '你好'})}.height('100%').width('100%')}
}

全局自定义函数

1. 全局的自定义构建函数可以被整个应用获取（前提是要export）
2. 不允许使用this和bind（改变指向）方法
3. 如果不涉及组件状态变量，建议使用全局的自定义构建方法

参数传递的规则：

1. 自定义构建函数的参数传递有

   • 按值传递
   • 按引用传递（如果传递的参数为状态变量，可以支持监听UI的刷新）

2. 均遵循以下规则：

   • 参数的类型必须与参数声明的类型一致
   • 在@Builder修饰的函数内部，不允许修改参数值
   • @Builder内UI语法遵循build( ) UI语法规则
   • 只有传入一个参数，且参数为直接传入对象字面量，才能按引用传递该参数，其余的方式均按值传递

3. 按引用传递参数

   • 如果在@Builder方法中调用自定义组件，ArkUI提供
     • $$作为引用传递参数的范式
     • 如果使用自定义的参数名传递给自定义组件，如果自定义组件使用@Link接受，会报错

4. 按值传递参数

   • 调用@Builder装饰的函数默认按值传递

     • 当传递的参数为状态变量时，状态变量的改变，不会引起@builder方法内的UI刷新

     • 当使用状态变量的时候，推荐使用引用变量传递

// 引用传递第一种写法
class temp_class01{param:string = ''param1:string = ''
}// 引用传递第二中写法
class temp_class02{param:string = ''param1:string = ''
}@Entry
@Component
struct temp_page103{@State param_build:string  ='123'@State param_build01:string  ='456'build() {Column({space:50}){//   引用传递第一种写法//   对象中有几个字面量，就必须传递几个Builder_function({param:this.param_build,param1:this.param_build01})//   引用传递第二种写法Builder_function01({param:this.param_build,param1:this.param_build01})Button(`点击改变`).onClick(()=>{this.param_build = '111'this.param_build01 = '222'})}.height('100%').width('100%')}
}@Builder
function Builder_function(temp_param:temp_class01){Column(){Text(temp_param.param).fontSize(20)Text(temp_param.param1).fontSize(20)}
}@Builder
function Builder_function01($$:temp_class02){Column(){Text(`${$$.param}`).fontSize(20).fontColor(Color.Red)Text(`${$$.param1}`).fontSize(20).fontColor(Color.Red)//   自定义组件
temp_component({str:$$.param})}}@Component
struct temp_component{// 接收传递过来的$$// 使用@Link装饰的状态变量接收，回报错@Prop str:string = ''build() {Column(){Text(this.str).fontSize(20).fontColor(Color.Yellow)}}
}