鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Builder组件内自定义构建函数与@Styles自定义组件重用样式（十）

一、@Builder自定义构建函数

1、什么是自定义构建函数

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

2、组件内定义构建函数

（1）定义语法：@Builder MyBuilder(...) {...}
（2）使用语法：this.MyBuilder(...) {...}
（3）语法要点：

• 自定义构建函数可以在所属组件的 build方法和其他自定义构建函数中调用，但不允许在组件外调用。
• 允许在自定义组件内定义⼀个或多个 @Builder方法，该方法被认为是该组件的私有、特殊类型的成员函数。
• 在自定义函数体中，this指代当前所属组件，组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。
• 自定义组件不仅可以添加属性，还可以添加事件
  （4）参数传递规则
  4、参数传递规则
  自定义构建函数的参数传递有按值传递和按引用传递两种，均需遵守以下规则：

参数的类型必须与参数声明的类型一致，不允许undefined、null和返回undefined、null的表达式。
在自定义构建函数内部，不允许改变参数值。如果需要改变参数值，且同步回调用点，建议使用@Link。
@Builder内UI语法遵循官方文档：自定义组件语法规则。

3、组件外定义构建函数

组件外定义构建函数的优点是方便多组件共同调用。定义时，需要加上function关键字。

//在组件外定义words构建函数
@Builder function words2(content:string){
   
   ...}
//使用组件外定义的构建函数：不能使用this或bind方法
words2(content)

4、@Builder装饰器练习

（1）练习任务
定义一个被@Builder修饰的构建函数，要求能够在同一行显示图标和文本。使用状态值刷新属性，点击时图标和文本发生相应的变化；刷新动作，再次点击后能够恢复原来的状态。

（2）练习代码

@Entry
@Component
struct Index {
   
   
  @State message: string = '@Builder \n 组件内构建函数'
  //设置状态变量，方便在选中诗词时能够作为标志位，默认未选中
  @State isChoose: boolean = false

  //创建组件内的构建函数：可以设定传递参数content
  @Builder words(content:string){
   
   
    Row(){
   
   
      Image(this.isChoose ? $r('app.media.icon') : $r('app.media.ic'))
        .width(35)
        .margin(15)
      //构建函数调用自己的形式参数时不需要使用this引用
      Text(content)
        .fontSize(25)
        .decoration({
   
   type:this.isChoose ? TextDecorationType.LineThrough