鸿蒙_自定义组件包含多个引用自定义构建函数@BuilderParam时的用法

有时候我们为了增加自定义组件的灵活性，可能放置多个引用自定义构建函数（通过@BuilderParam修饰的变量，指向一个自定义构建函数），那么和只有一个时有什么区别呢，我们新建一个页面来测试一下：

TypeScript 复制代码

@Entry
@Component
struct TestBuilderParamInMultiComponent {
  @State message: string = 'Test @BuilderParam In Multiple Component';

  //编写一个自定义构建函数，用于替换自定义组件的部分UI
  @Builder
  builderInMainPage() {
    Row() {
      Text('在父组件中定义、').fontColor(Color.Green)
      Text('自定义构建函数作为参数')
    }
  }

  build() {
    Column() {
      Text(this.message)
        .margin({ bottom: 10 })
        .fontSize(15)
        .fontWeight(FontWeight.Bold)

      //不传参（如果自定义组件内的builderParamInComp加了@Require不传会报错）
      CompWithTwoBuilderParam()

      // 普通传参1个
      CompWithTwoBuilderParam({
        builderParam2InComp: this.builderInMainPage
      })

      // 普通传参2个
      CompWithTwoBuilderParam({
        builderParam1InComp: this.builderInMainPage,
        builderParam2InComp: this.builderInMainPage
      })

      //尾随闭包不可用，会报错
      /*CompWithTwoBuilderParam() {
        Row() {
          Text('尾随闭包不适用多@BuilderParam参数')
        }
      }*/

    }
    .padding(10)
    .height('100%')
    .width('100%')
  }
}

//自定义组件
@Component
struct CompWithTwoBuilderParam {
  //自定义构建函数1
  @Builder
  builder1InComp() {
    Text('1、自定义构建函数1的默认内容')
  }
  //自定义构建函数2
  @Builder
  builder2InComp() {
    Text('2、自定义构建函数2的默认内容')
  }

  //引用自定义构建函数1（把自定义构建函数整体作为一个参数）
  //@Require
  @BuilderParam
  builderParam1InComp: () => void = this.builder1InComp;

  //引用自定义构建函数2
  //@Require
  @BuilderParam
  builderParam2InComp: () => void = this.builder2InComp;

  build() {
    Column({ space: 10 }) {
      Text('这是一个自定义组件').fontWeight(FontWeight.Bold)
      this.builderParam1InComp()
      this.builderParam2InComp()
    }
    .padding(10)
    .width('100%')
    .margin({ bottom: 10 })
    .border({ width: 1, color: Color.Blue })
  }
}

通过测试我们发现，在有多个@BuilderParam修饰的参数时，之前的尾随闭包方式不可用了，因为尾随闭包在调用自定义组件时，在后边大括号内直接写UI组件，是不指定参数名的，那么当参数大于1个时，就不知道该传给谁了，所以就不能再使用了。另外，如果我们在参数上没有设置@Require的必传验证，那么我们可以不传参或传部分参数，未传参的则保持默认值。

实际运行效果如下：