HarmonyOS 页面动态配置？

Question

现有一个需求，要求我们在App启动时，通过网络接口下发配置，通过响应中的数据，去配置底部Tab展示不同的模块内容，比如响应为

{
  "code":200,
"message":"success",
"data":[
  {
    "url":"pageA",
  "icon":xxx.png,
  "iconSelected":xxx.png
  },
  { "url":"pageB",
  "icon":xxx.png,
  "iconSelected":xxx.png

  }
  ]
}

现需要通过该请求，去展示不同的底部Tab，有什么实现方案吗

现在已经有启动页，Tab主页面是确定的，但是Tab主页面中的子component是需要动态配置的，这种需要怎么做

Answer 1

可以使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