HarmonyOS 页面动态配置

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

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

  }
  ]
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

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

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

HarmonyOS

superinsect

2024-12-25 08:45:15

浏览

回答 1

按赞同

按时间

shlp

可以使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)
      })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.

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

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

2024-12-25 10:29:08

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 页面动态配置

订阅鸿蒙技术特刊，精选内容抢先看