HarmonyOS 鸿蒙Next WrappedBuilder封装的组件如何传参

发布于 1周前 作者 h691938207 来自 鸿蒙OS

HarmonyOS 鸿蒙Next WrappedBuilder封装的组件如何传参

在页面中导入这个工厂类，该如何给组件传参


@Builder
function rowContent(rowIcon: Resource, name: string, nextIcon: Resource, fontSize: number) {
  Image(rowIcon)
    .width(‘100%’)
    .height(45)
    .padding({ top: 5, bottom:5 })
  Row() {
    Text(name)
      .fontSize(fontSize)
    Image(nextIcon).height(20)
  }
  .layoutWeight(1)
  .justifyContent(FlexAlign.SpaceBetween)
}

let factoryMap: Map<string, object> = new Map();

// 将需要工厂化的组件存入到组件工厂中
factoryMap.set(‘rowContent’, wrapBuilder(rowContent));

// 导出组件工厂
export { factoryMap };

Harmonyos Next教程
3 回复 
WrappedBuilder对象也是一个模板类，模板参数Args extends Object[]是需要包装的builder函数的参数列表。
// 使用方法
let myRowContent: WrappedBuilder<[Resource, string, Resource, number]> = factoryMap.get('rowContent') as WrappedBuilder<[]>;

我试试

在HarmonyOS鸿蒙Next中，WrappedBuilder封装的组件传参主要依赖于@Builder注解及wrapBuilder函数。以下是对传参方式的详细解析：

首先，需定义一个@Builder函数，该函数接受所需参数，并构建UI元素。例如：

[@Builder](/user/Builder) function MyBuilder(value: string, size: number) {
  Text(value).fontSize(size);
}

接着，使用wrapBuilder函数封装该@Builder函数，得到一个WrappedBuilder对象。该对象可在struct组件内部通过其builder属性方法传参并渲染UI。例如：

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

@Entry @Component struct Index {
  @State message: string = 'Hello World';
  build() {
    Row() {
      Column() {
        globalBuilder.builder(this.message, 50);
      }
      .width('100%')
      .height('100%');
    }
  }
}

如果需要在struct内部使用多个不同的@Builder函数，可将它们封装成WrappedBuilder数组，并通过ForEach进行遍历渲染。

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

回到顶部