HarmonyOS鸿蒙Next中@BuilderParam传递UI问题

If a component attribute supports local initialization, a valid, runtime-independent default value should be set for it.

完整代码

@Entry
@Component
struct RequireCase {
  @State
  num: number = 0

  @Builder componentBuilder() {
    Text(`我来实验一下`)
  }

  build() {
    Row() {
      Column() {
        RequireChild({ num: this.num , customBuilderParam:this.componentBuilder})
        Button("+1")
          .onClick(() => {
            this.num++
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct RequireChild {

  @Require
  [@BuilderParam](/user/BuilderParam) customBuilderParam: () => void;

  @Require
  @Prop
  num: number = 0
  build() {
    Column() {
      Text("子组件" + this.num)
      this.customBuilderParam
    }
  }
}

更多关于HarmonyOS鸿蒙Next中@BuilderParam传递UI问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 1楼•5 天前

可参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builderparam-V5#%E5%8F%82%E6%95%B0%E5%88%9D%E5%A7%8B%E5%8C%96%E7%BB%84%E4%BB%B6，

将customBuilderParam传入一个空的Builder进行初始化即可运行，示例代码如下：

@Entry
@Component
struct RequireCase {
  @State num: number = 0
  @Builder componentBuilder() {
    Column(){
      Text(`我来实验一下`)
    }
  }
  build() {
    Row() {
      Column() {
        RequireChild({ num: this.num, customBuilderParam: this.componentBuilder })
        Button("+1")
          .onClick(() => {
            this.num++
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct RequireChild {
  @Builder overBuilder() {}
  @Require @BuilderParam customBuilderParam: () => void=this.overBuilder;
  @Require @Prop num: number = 0
  build() {
    Column() {
      Text("子组件" + this.num)
      this.customBuilderParam()
    }
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中@BuilderParam传递UI问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 2楼•5 天前作者

在HarmonyOS鸿蒙Next中，@BuilderParam是一个装饰器，用于将UI构建器作为参数传递给组件。它允许开发者在组件定义时动态地传入UI构建逻辑，从而实现更灵活的组件复用和定制。例如：

@Component
struct ParentComponent {
  @BuilderParam contentBuilder: () => void;

  build() {
    Column() {
      this.contentBuilder();
    }
  }
}

@Entry
@Component
struct MyApp {
  @Builder myCustomUI() {
    Text('Hello, HarmonyOS!');
  }

  build() {
    Column() {
      ParentComponent({ contentBuilder: this.myCustomUI });
    }
  }
}

在上述代码中，ParentComponent通过@BuilderParam接收了一个UI构建器contentBuilder，并在其build方法中调用该构建器。MyApp组件中定义了一个自定义的UI构建器myCustomUI，并将其传递给ParentComponent，实现了UI的动态传递。这种方式在需要根据不同场景定制UI时非常有用。

sinazl 3楼•5 天前

在HarmonyOS鸿蒙Next中，@BuilderParam用于传递自定义的UI构建器。通过@BuilderParam，可以将一个@Builder修饰的方法作为参数传递给组件，从而实现动态UI构建。例如：

@Component
struct MyComponent {
  @BuilderParam contentBuilder: () => void

  build() {
    Column() {
      this.contentBuilder()
    }
  }
}

@Entry
@Component
struct ParentComponent {
  @Builder customUI() {
    Text('Hello, HarmonyOS!')
  }

  build() {
    Column() {
      MyComponent({ contentBuilder: this.customUI })
    }
  }
}

在此例中，MyComponent接收一个@BuilderParam参数contentBuilder，并在其build方法中调用。ParentComponent通过传递customUI方法，实现了动态UI的构建。这种方法增强了组件的灵活性和复用性。