HarmonyOS 鸿蒙Next 自定义组件Index使用ForEach渲染不同@Builder函数，通过builderArr声明的wrapBuilder数组体现不同@Builder函数效果，实现不同组件的通信

HarmonyOS 鸿蒙Next 自定义组件Index使用ForEach渲染不同@Builder函数，通过builderArr声明的wrapBuilder数组体现不同@Builder函数效果，实现不同组件的通信

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-wrapbuilder-V5#builder方法赋值给变量在ui语法中使用

这个例子中，如果有多个@Builder，其中@BuilderA和@BuilderB之间有关联，@BuilderA如何修改@BuilderB中的值呢？


更多关于HarmonyOS 鸿蒙Next 自定义组件Index使用ForEach渲染不同@Builder函数，通过builderArr声明的wrapBuilder数组体现不同@Builder函数效果，实现不同组件的通信的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

@Observed装饰器

更多关于HarmonyOS 鸿蒙Next 自定义组件Index使用ForEach渲染不同@Builder函数，通过builderArr声明的wrapBuilder数组体现不同@Builder函数效果，实现不同组件的通信的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是我实现的方式，你可以参考一下，可能无法使用builderArr声明，因为传递参数不同，并且如果把wrapBuilder()再放在[@Builder](/user/Builder)里实现，需要加一层按引用传递

[@Builder](/user/Builder)
function MyBuilder($$: MyObject) {
  Text($$.value)
    .fontSize($$.size)
}

@Builder
function YourBuilder($$: YourObject ) {
Text($$.value)
.fontSize($$.size)
.fontColor(Color.Pink)
.onClick(() => {
$$.obj.value = ‘test’
$$.obj.size = 121
})
}


class YourObject {
value: string = ‘’;
size: number = 10;
obj: MyObject = new MyObject();
}


class MyObject {
value: string = ‘message’;
size: number = 20
}


@Entry
@Component
struct Index {
@State @Watch(‘myObjectChange’) obj: MyObject = new MyObject();


myObjectChange() {
console.log(‘myObjectChange’)
}


build() {
Row() {
Column() {
wrapBuilder(MyBuilder).builder({
value: this.obj.value,
size: this.obj.size
})
wrapBuilder(YourBuilder).builder({
value: ‘Hello World’,
size: 30,
obj: this.obj
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}

在HarmonyOS鸿蒙Next中，自定义组件Index可以使用ForEach来渲染不同@Builder函数。通过builderArr声明的wrapBuilder数组，可以体现不同@Builder函数效果，实现不同组件间的通信。

具体操作步骤如下：

  1. 定义Builder函数：在自定义组件中定义多个@Builder函数，每个函数对应不同的组件布局或属性。

  2. 准备wrapBuilder数组：创建一个wrapBuilder数组，该数组包含多个Builder对象，每个对象对应不同的@Builder函数生成的组件。

  3. 使用ForEach渲染：在Index组件的模板中使用ForEach指令遍历wrapBuilder数组，根据数组中的Builder对象渲染对应的组件。

  4. 实现组件通信：通过HarmonyOS提供的事件机制或数据绑定机制，实现不同组件间的通信。例如，可以使用@Consume注解消费事件，或使用@Link注解绑定数据。

示例代码（简化）：

@Entry
@Component
struct Index {
  @State wrapBuilders: Array<Builder> = [Builder1(), Builder2()];

  build() {
    ForEach(this.wrapBuilders, (item) => {
      Column() {
        item.build()
      }
    })
  }
}

注意：上述代码为简化示例，实际开发中需根据具体需求调整。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部