HarmonyOS 页面动态配置

可以使wrapBuilder来封装@Builder。

参考demo：

// DataModel.ets
// 定义一个空的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 getData(): Promise<DataModel[]> {
  let arr: DataModel[] = [new DataModel('1', 'test1', customPageWrappedBuilder), new DataModel('2', 'test2', customPageWrappedBuilder)]
  return new Promise((resolve) => {
    resolve(arr)
  })
}

// 页面使用
// TestPage.ets
import { DataModel, getData } from './DataModel'
@Entry
@Component
struct TestPage {
  testData: DataModel[] = []

  async aboutToAppear() {
    this.testData = await getData()
  }
  build() {
    Column() {
      ForEach(this.testData, (item: DataModel) => {
        item.builderWrap.builder(item.value)
      })
    }
  }
}

全局@Builder作为wrapBuilder的参数返回WrappedBuilder对象，实现全局@Builder可以进行赋值和传递。

文档地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-wrapbuilder-V5