HarmonyOS tabTabContent 如何动态显示一个导入的组件

Tabs({ barPosition: BarPosition.End, controller: this.controller }) {

  ForEach(this.tab_conf.tab_list,(item:IBuilderParams,idx:number)=>{
    TabContent() {
      //代码
      item.content()
    }.tabBar(this.tabBuilder(idx))
  })

}
其中的   item.content 是 引入的其它组件，如
import My from './my/Index'


interface IBuilderParams {

  label: string //标签名称
  normalIcon: Resource //未选中状态图标
  selectIcon: Resource //选中状态图标
  content: Function
}

item的类容如
{
  label: '首页',//标签
  normalIcon: $r('app.media.icon_home_normal'),//未选中图标
selectIcon: $r('app.media.icon_hone_seclect'),//选中图标
content:My,
},
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.

现在直接写 item.content() 报错提示

‘item.content()’ does not comply with the UI component syntax.

我该如何写才能动态的按照配置里的组件自动调用，而不是写

if (idx == 0) {
  xx()
}
elseif(idx == 1) {
  yy()
} 
1.
2.
3.
4.
5.
6.

HarmonyOS

zxjiu

2024-12-24 14:51:59

浏览

回答 1

按赞同

按时间

shlp

官方目前是支持builder动态导入的，可封装为builder再试

@Builder
function builder1(){
  MyComponent1();
}

@Builder
function builder2(){
  MyComponent2();
}
@Component
struct MyComponent1 {
  private countDownFrom: number = 0;
  private color: Color = Color.Blue;

  build() {
    Text('我是自定义组件1')
  }
}

@Component
struct MyComponent2 {
  private countDownFrom: number = 0;
  private color: Color = Color.Blue;

  build() {
    Text('我是自定义组件2')
  }
}
interface IBuilderParams {
  label: string //标签名称
  content: WrappedBuilder<[]>
}
const componentList: Array<IBuilderParams> = [{label: '自定义组件1',content: wrapBuilder(builder1)},{label: '自定义组件2',content: wrapBuilder(builder2)}]

@Entry
@Component
struct WidgetPage {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('WidgetPageHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
      Column(){
        ForEach(componentList,(item:IBuilderParams)=>{
          Text(item.label)
          item.content.builder();
        })
      }

    }
    .height('100%')
    .width('100%')
  }
}
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.
58.
59.
60.
61.

官方也提供了动态导入的案例demo，可参考：

https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-application-navigation-design-V5#section16766824123214

2024-12-24 17:48:52

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS tabTabContent 如何动态显示一个导入的组件

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