鸿蒙的entry module显示feature module的page

Question

请问
鸿蒙开发ArkTs 的tabs组件的tabContent如何显示 feature module的page?

Tabs({barPosition: this.isLandscape ? BarPosition.Start : BarPosition.End, index: this.activeIndex}) {
TabContent() {
HomePage()
}.tabBar(this.TabBarBuilder('首页',0,$r('app.media.tab_home'),$r('app.media.tab_home_selected')))

  TabContent() {
    //显示feature module的page
  }.tabBar(this.TabBarBuilder('xxx',2,$r('app.media.tab_service'),$r('app.media.tab_service_selected')))
}.vertical(this.isLandscape).onChange((index)=>{
  this.activeIndex = index
}).barHeight(vp2vp(50))

Answer 1

🕖上午好，题主！目前：🟢[在线]
📢参考通义千问、由郭老师整理提供！
📣今日诗号：晓看天色暮看云，行也思君，坐也思君。

您想在鸿蒙 ArkTS 应用中使用 Tabs 组件来显示来自 feature module 的页面。由于鸿蒙的模块化设计，您需要正确配置模块间的页面路由才能实现此功能。以下是完整的解决方案和代码示例：

1. 在 Feature Module 中定义页面和路由：

• 假设您的 feature module 名为 myfeature，其中包含一个名为 FeaturePage 的页面。
• 在 myfeature 模块的 entry/src/main/ets/pages 目录下创建 FeaturePage.ets 文件：

@Entry
@Component
struct FeaturePage {
  build() {
    Column() {
      Text('This is a page from the feature module!')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

• 在 myfeature 模块的 entry/src/main/ets/pages/index.ets 文件中注册路由：

export default {
  pages: [
    'pages/FeaturePage', // 注册 FeaturePage 路由
  ],
};

2. 在 Entry Module 中导入 Feature Module 的路由:

• 在您的 entry module 中，导入 feature module 的 router 对象。
• 使用 router.push 方法导航到 feature module 的页面。

import router from '@ohos.router';
import featureModuleRouter from '../myfeature/entry/src/main/ets/pages/index'; // 导入 feature module 的路由

@Entry
@Component
struct Index {
  @State isLandscape: boolean = false;
  @State activeIndex: number = 0;

  TabBarBuilder(label: string, index: number, icon: Resource, selectedIcon: Resource) {
    return TabBar() {
      Image(this.activeIndex === index ? selectedIcon : icon)
        .width(24)
        .height(24)
      Text(label)
        .fontSize(10)
        .opacity(this.activeIndex === index ? 1 : 0.5)
    }
    .width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: this.isLandscape ? BarPosition.Start : BarPosition.End, index: this.activeIndex }) {
        // 首页 TabContent
        TabContent() {
          HomePage()
        }.tabBar(this.TabBarBuilder('首页', 0, $r('app.media.tab_home'), $r('app.media.tab_home_selected')))

        // Feature Module 页面 TabContent
        TabContent() {
          // 使用 router.push 导航到 FeaturePage
          Column() {
            Button('Go to Feature Page')
              .onClick(() => {
                router.push({
                  uri: featureModuleRouter.pages[0], // 使用 feature module 的路由路径
                });
              })
          }
        }.tabBar(this.TabBarBuilder('xxx', 2, $r('app.media.tab_service'), $r('app.media.tab_service_selected')))
      }
      .vertical(this.isLandscape)
      .onChange((index) => {
        this.activeIndex = index;
      })
      .barHeight(vp2vp(50))
    }
  }
}

3. 配置模块依赖：

• 确保在您的 entry module 的 build.gradle 文件中添加了对 feature module 的依赖。

dependencies {
    implementation project(':myfeature') // 替换为您的 feature module 名称
}

完成以上步骤后，您就可以在 entry module 的 Tabs 组件中点击 "xxx" 标签，跳转到 feature module 的 FeaturePage 页面了。

注意：

• 将代码中的占位符替换为您的实际项目配置，例如模块名称、页面路径和资源文件。
• 确保您的开发环境已正确配置，并且已安装所有必要的依赖项。

希望以上信息对您有所帮助！ 如果您还有其他问题，请随时提出。