HarmonyOS鸿蒙Next中tabTabContent如何动态显示一个导入的组件
HarmonyOS鸿蒙Next中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() } else if(idx == 1) { yy() }
更多关于HarmonyOS鸿蒙Next中tabTabContent如何动态显示一个导入的组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
您可以使用wrapBuilder进行组件的封装和传递
@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%')
}
}https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-wrapbuilder-V5
官方目前是支持builder动态导入的，您可封装为builder再试
官方也提供了动态导入的案例demo，可参考：
更多关于HarmonyOS鸿蒙Next中tabTabContent如何动态显示一个导入的组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，TabContent可以通过@Builder装饰器动态显示导入的组件。首先，确保你已经导入了需要显示的组件。然后，在TabContent中使用@Builder方法动态构建UI内容。
例如：
import { MyComponent } from './MyComponent';
@Entry
@Component
struct MyTabs {
@Builder
dynamicContent() {
MyComponent();
}
build() {
Tabs() {
TabContent() {
this.dynamicContent();
}
}
}
}在这个例子中，MyComponent是导入的组件，dynamicContent方法使用@Builder装饰器动态构建了TabContent的内容。通过这种方式，可以在TabContent中动态显示导入的组件。
在HarmonyOS鸿蒙Next中，可以通过@Builder或@Extend装饰器动态创建和显示组件。假设你有一个导入的组件MyComponent，可以在tabTabContent中使用build方法动态加载。例如：
import MyComponent from './MyComponent';
@Entry
@Component
struct MyTabs {
@Builder
buildTabContent() {
MyComponent();
}
build() {
TabContent() {
this.buildTabContent();
}
}
}通过@Builder装饰器动态构建tabTabContent的内容，即可实现组件的动态显示。
