HarmonyOS鸿蒙Next中关于Builder装饰器的使用及传参问题，代码如下

HarmonyOS鸿蒙Next中关于Builder装饰器的使用及传参问题，代码如下 如下嵌套组件，为什么页面最终展示的是parent child parent，不太明白

@Component
struct Child {
  label: string = `Child`
  @Builder customBuilder() {}
  @Builder customChangeThisBuilder() {}
  @BuilderParam customBuilderParam(): void = this.customBuilder;
  @BuilderParam customChangeThisBuilderParam(): void = this.customChangeThisBuilder;

  build() {
    Column() {
      this.customBuilderParam()
      this.customChangeThisBuilderParam()
    }
  }
}

@Entry
@Component
struct Parent {
  label: string = `Parent`

  @Builder componentBuilder() {
    Text(`${this.label}`)
  }

  build() {
    Column() {
      this.componentBuilder()
      Child({ customBuilderParam: this.componentBuilder, customChangeThisBuilderParam: ():void=>{this.componentBuilder()} })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中关于Builder装饰器的使用及传参问题，代码如下的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

第一个Parent应该比较好理解，就是@Entry Component的componentBuilder执行的结果。

第二个Child和第三个Parent是调自定义组件执行的结果，第一个参数customBuilderParam是将父组件中定义的函数传递给子组件，并在子组件中调用，所以执行的label是Child，就输出了Child；第二个参数是用箭头函数将父组件执行的结果传递，所以输出Parent。

更多关于HarmonyOS鸿蒙Next中关于Builder装饰器的使用及传参问题，代码如下的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Column容器组件添加宽、高度看看

在HarmonyOS鸿蒙Next中，Builder装饰器用于构建自定义组件或UI布局。它允许你将复杂的UI逻辑封装在一个函数中，并通过传参来动态生成UI。以下是一个简单的示例代码，展示了Builder装饰器的使用及传参问题：

@Builder
function myBuilder(param1: string, param2: number) {
  Column() {
    Text(param1)
      .fontSize(20)
      .fontColor(Color.Black)
    Text(`Count: ${param2}`)
      .fontSize(16)
      .fontColor(Color.Gray)
  }
  .padding(10)
  .backgroundColor(Color.White)
}

@Entry
@Component
struct MyComponent {
  @State private count: number = 0

  build() {
    Column() {
      myBuilder("Hello, HarmonyOS!", this.count)
      Button("Increase Count")
        .onClick(() => {
          this.count++
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

在这个例子中，myBuilder是一个使用@Builder装饰的函数，它接受两个参数：param1和param2。param1用于显示文本内容，param2用于显示计数器的值。在MyComponent组件的build方法中，myBuilder被调用并传入动态参数。每次点击按钮时，count状态会更新，并重新渲染UI。

通过这种方式，Builder装饰器可以有效地将UI逻辑与组件分离，提高代码的可读性和可维护性。

在HarmonyOS鸿蒙Next中，@Builder装饰器用于定义一个构建函数，允许你在组件中复用UI结构。通过@Builder定义的函数可以接收参数，并在构建时动态生成UI。例如：

@Builder
function CustomText(content: string) {
  Text(content)
    .fontSize(20)
    .fontColor(Color.Black)
}

在组件中使用时，可以传递参数：

struct MyComponent {
  build() {
    Column() {
      CustomText("Hello, HarmonyOS!")
    }
  }
}

@Builder函数支持传递任意数量和类型的参数，使得UI构建更加灵活。

回到顶部