鸿蒙_引用自定义构建函数@BuilderParam在自定义组件中的使用

在ArkUI的学习中通过BuilderParam修饰的参数就是引用自定义构建函数它可以接受一个自定义构建函数。当我们编写了一个自定义组件后想要在使用时替换其中的某一部分UI内容就可以在组件内部可以将这部分抽离放到自定义构建函数内我们来验证一下如何使用Entry Component struct TestBuilderParamInComponent { State message: string Test BuilderParam In Component; //编写一个自定义构建函数用于替换自定义组件的部分UI Builder builderInMainPage() { Row() { Text(2、).fontColor(Color.Green) Text(将自定义构建函数作为参数传入组件) } } build() { Column() { Text(this.message) .margin({ bottom: 10 }) .fontSize(18) .fontWeight(FontWeight.Bold) //不传参如果自定义组件内的builderParamInComp加了Require不传会报错 CompWithOneBuilderParam() //普通传参 CompWithOneBuilderParam({ builderParamInComp: this.builderInMainPage }) //尾随闭包在自定义组件后的大括号内直接写UI组件 CompWithOneBuilderParam() { Row() { Text(3、).fontColor(Color.Red) Text(通过尾随闭包方式直接传入组件) } } } .padding(10) .height(100%) .width(100%) } } //自定义组件 Component struct CompWithOneBuilderParam { //自定义构建函数 Builder builderInComp() { Text(1、自定义构建函数的默认内容) } //引用自定义构建函数把自定义构建函数整体作为一个参数 //Require BuilderParam builderParamInComp: () void this.builderInComp; build() { Column({ space: 10 }) { Text(这是一个自定义组件).fontWeight(FontWeight.Bold) this.builderParamInComp() } .padding(10) .width(100%) .margin({ bottom: 10 }) .border({ width: 1, color: Color.Blue }) } }通过测试我们发现如果自定义组件内部只包含一个引用自定义构建函数BuilderParam修饰的参数时还可以通过尾随闭包的方式使用当有多个引用自定义构建函数时只能通过普通传参方式使用。如果某个参数被Require修饰了那么该参数就是必传项如果不写就会在编辑器内标红。运行效果如下