HarmonyOS 如何传递UI数组到子组件中？

Question

我们目前希望的是实现一个自定义的组件，该组件是一个二次封装的Swiper ，组件需要接收一个任意的UI数组。使用wrapBuilder由于是全局@Builder方法，无法获取到上下文中的数据，我们希望builder中的入参是任意类型的，是从调用该组件的上下文中取出来的数据组合成的UI ，来传递到该组件。比如：

@Component
struct MySwiper{
  children:UI数组
  build(){
    Swiper(){
      ForEach(this.children,(child)=>{
        // 处理child
      })
    }
    . 点出各种我们封装出来的样式
  }
}

有什么办法能像 Column Row Swiper等直接接收ForEach 生成的UI 数组呢？

Answer 1

在自定义组件中使用@BuilderParam装饰的属性时也可通过尾随闭包进行初始化。在初始化自定义组件时，组件后紧跟一个大括号“{}”形成尾随闭包场景。可以将尾随闭包内的内容看做@Builder装饰的函数传给@BuilderParam。

@Component
struct CustomContainer {
  private swiperController: SwiperController = new SwiperController()
  @Prop header: string = '';
  @Builder closerBuilder(){}
  // 使用父组件的尾随闭包{}(@Builder装饰的方法)初始化子组件@BuilderParam
  @BuilderParam closer: () => void = this.closerBuilder

  build() {
    Column() {
      Text(this.header)
        .fontSize(30)
      Swiper(this.swiperController) {
        this.closer()
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(true)
      .interval(4000)
      .loop(true)
      .indicatorInteractive(true)
      .duration(1000)
      .itemSpace(0)
      .indicator( // 设置圆点导航点样式
        new DotIndicator()
          .itemWidth(15)
          .itemHeight(15)
          .selectedItemWidth(15)
          .selectedItemHeight(15)
          .color(Color.Gray)
          .selectedColor(Color.Blue))
      .displayArrow({ // 设置导航点箭头样式
        showBackground: true,
        isSidebarMiddle: true,
        backgroundSize: 24,
        backgroundColor: Color.White,
        arrowSize: 18,
        arrowColor: Color.Blue
      }, false)
      .curve(Curve.Linear)


    }
  }
}


@Entry
@Component
struct CustomContainerUser {
  @State text: string = 'header';
  @State data: number[] = [1, 2, 3, 4]

  @Builder
  specificParam() {
    ForEach(this.data, (item: number, index) => {
      Column() {
        Text('testA')
          .fontSize(30)
        Text('testB')
          .fontSize(30)
      }
      .width('100%')
      .height(200)
      .backgroundColor(Color.Yellow)
    }, (item: number) => item.toString())

  }
  build() {
    Column() {
      // 创建CustomContainer，在创建CustomContainer时，通过其后紧跟一个大括号“{}”形成尾随闭包
      // 作为传递给子组件CustomContainer @BuilderParam closer: () => void的参数
      CustomContainer({ header: this.text }) {
        this.specificParam()
      }
    }
  }
}

1、@BuilderParam是用来承接@Builder函数的，只能传builder函数，不能传递数组

2、能在builder里forEach循环，这是因为@Builder装饰的是函数是自定义构造函数，遵循build函数语法规则，支持在里面用forEach循环UI

3、在builder里column都已经包裹了，不需要传递过去还包裹Column

4、不建议开发者通过传递UI数组的方式

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builderparam-V5\#%E5%B0%BE%E9%9A%8F%E9%97%AD%E5%8C%85%E5%88%9D%E5%A7%8B%E5%8C%96%E7%BB%84%E4%BB%B6