HarmonyOS view动态添加？

Question

动态添加子view该怎么写呢？

Answer 1

可以通过wrapBuilder封装全局@Builder来实现，不同的组件可以设置不同的@builder。

可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-wrapbuilder-V5

可以参考以下代码：

// 定义一个空的builder
@Builder
function defaultBuilder(): void {}

// 定义一个class，有对应的WrappedBuilder
export class DataModel {
  id: string = ''
  value: string = ''
  otherProp: string = ''
  builderWrap: WrappedBuilder<[string]> = wrapBuilder(defaultBuilder)
  constructor(id: string, value: string, builderWrap: WrappedBuilder<[string]>) {
    this.id = id
    this.value = value
    this.builderWrap = builderWrap
  }
}

@Builder
function CustomBuilder(param: string) {
  Column() {
    Text(param)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
  }.height(50)
}

let customPageWrappedBuilder: WrappedBuilder<[string]> = wrapBuilder(CustomBuilder);

export function getNewsData(): Promise<DataModel[]> {
  let arr: DataModel[] = [new DataModel('1', 'test1', customPageWrappedBuilder), new DataModel('2', 'test2', customPageWrappedBuilder)]
  return new Promise((resolve) => {
    resolve(arr)
  })
}

export function getNewsItem(id: string, value: string): Promise<DataModel> {
  return new Promise((resolve) => {
    resolve(new DataModel(id, value, customPageWrappedBuilder))
  })
}

@Entry
@Component
struct WrapperBuilderPage {
  @State testData: DataModel[] = []
  @State count: number = 2

  async aboutToAppear() {
    this.testData = await getNewsData();
  }
  build() {
    Column() {
      Row() {
        Button('addView').onClick(async () => {
          this.count++
          let newsItem: DataModel = await getNewsItem('' + this.count, 'test' + this.count)
          this.testData.push(newsItem)
        })
        Button('removeView').onClick(async () => {
          this.count--
          this.testData.pop()
        })
      }
      Column() {
        ForEach(this.testData, (item: DataModel) => {
          item.builderWrap.builder(item.value)
        })
      }
    }
    .width('100%')
    .height('100%')
  }
}