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,
},

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

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

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

if (idx == 0) {
  xx()
}
elseif(idx == 1) {
  yy()
}

HarmonyOS

zxjiu

3天前

浏览

回答 1

待解决

回答 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%')
  }
}

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

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

3天前

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

发布

51CTO

51CTO博客

51CTO学堂

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

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