HarmonyOS鸿蒙Next中@Builder修饰的自定义构建函数中，可以传递另一个@Builder修饰的自定义构建函数吗？

HarmonyOS鸿蒙Next中@Builder修饰的自定义构建函数中，可以传递另一个@Builder修饰的自定义构建函数吗？

[@Builder](/user/Builder)
buildTitleWithChild(title: string,   [@Builder](/user/Builder) childBuilder: () => void) {}

在同一个组件中，buildTitleWithChild()方法会被多处调用。其中childBuilder参数需要接收不同的自定义UI函数。请问是否可以在不同调用处传递不同的childBuilder实现？注意这里讨论的是同一组件内的调用，不涉及父子组件之间的传递。

更多关于HarmonyOS鸿蒙Next中@Builder修饰的自定义构建函数中，可以传递另一个@Builder修饰的自定义构建函数吗？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

尝试了下按上面这种写法无法实现，编译会有报错，提供两种方案，楼主看下是否可行？

方案一：封装子组件，结合BuilderParam来实现，示例代码如下：

@Component
struct Child {
  @Builder customBuilder() {};
  @BuilderParam customBuilderParam: () => void = this.customBuilder;

  build() {
    Column() {
      this.customBuilderParam()
    }
  }
}
@Builder
function aBuilder() {
  Text('hello a')
}

@Builder
function bBuilder() {
  Text('hello b')
}

// 调用
Child({
  customBuilderParam: aBuilder
})
Child({
  customBuilderParam: bBuilder
})

方案二：通过WrappedBuilder将自定义UI函数全部封装为全局builder，在组件内需要的地方使用，示例代码如下：

@Builder
function MyBuilder(value: string, size: number) {
  Text(value)
    .fontSize(size)
}

@Builder
function YourBuilder(value: string, size: number) {
  Text(value)
    .fontSize(size)
    .fontColor(Color.Pink)
}

const builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder), wrapBuilder(YourBuilder)];

@Builder 
function testBuilder() {
  builderArr[0].builder('Hello World', 30);
  builderArr[1].builder('Hello World', 50);
}

// 调用

build() {
  Column() {
    Row() {
      Column() {
        this.testBuilder()
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中@Builder修饰的自定义构建函数中，可以传递另一个@Builder修饰的自定义构建函数吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以啊，为啥不可以啊 0 0&nbsp;

在HarmonyOS鸿蒙Next中，@Builder修饰的自定义构建函数可以传递另一个@Builder修饰的自定义构建函数。通过将@Builder函数作为参数传递给另一个@Builder函数，可以实现更灵活的组件构建逻辑。这种传递方式允许在构建过程中动态组合不同的构建逻辑，提升代码的复用性和可维护性。

在HarmonyOS Next中，@Builder修饰的自定义构建函数可以接收另一个@Builder函数作为参数。你给出的代码示例是完全可行的，可以在同一组件内的不同调用处传递不同的childBuilder实现。

具体来说：

  1. 这种设计模式允许你在同一组件内复用buildTitleWithChild函数，同时动态改变其子UI内容
  2. 每个调用点可以传入不同的@Builder函数作为childBuilder参数
  3. 这种传递是在编译时确定的，不会影响运行时性能

示例用法：

[@Builder](/user/Builder)
function BuilderA() {
  Text('Builder A')
}

[@Builder](/user/Builder)
function BuilderB() {
  Text('Builder B')
}

// 使用处
buildTitleWithChild('Title1', BuilderA)
buildTitleWithChild('Title2', BuilderB)

这种模式在需要复用UI结构但内容有差异的场景下非常有用。

回到顶部