HarmonyOS 鸿蒙Next其他页面也显示另一个页面的tabs组件

HarmonyOS 鸿蒙Next其他页面也显示另一个页面的tabs组件 目前有两个模块，一个feature模块，一个是product模块，从product模块中的index页面，使用tabs组件，渲染feature模块中的mainpage组件（这是一个组件，不是page页面），这里是代码：

而后在mainpage中，使用navigation组件，进行跨组件的页面跳转，跳转到product模块中的Page03_detail页面（该页面是一个page页面，不是一个组件）

这里面，我并没有写tabs组件，为什么他的显示的时候，下面是由tabs组件的

有没有大佬可以解释一下这里是怎么回事呀，我问了我的老师，他说tabs估计是全局显示的，如果是全局显示，我在进入程序的时候，有个广告页，这个广告页为啥没有这个导航栏呢？


更多关于HarmonyOS 鸿蒙Next其他页面也显示另一个页面的tabs组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

因为你在MainPage中使用的navigation，MainPage会作为navigation的根容器，使用NavPathStack打开的新页面会压栈在MainPage上，MainPage又是在Tabs组件内，就会把tabBar的内容展示出来。

如果你在index页面使用navigation就不会出现这个问题。

更多关于HarmonyOS 鸿蒙Next其他页面也显示另一个页面的tabs组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中，鸿蒙Next版本支持跨页面共享UI组件，包括Tabs组件。这种机制允许开发者在一个页面中定义Tabs组件，并在其他页面中复用或显示相同的Tabs组件。实现这一功能的关键在于使用@State、@Prop或@Link等装饰器来管理组件状态，并通过页面路由或组件传递机制来实现跨页面的数据共享。

具体实现步骤如下：

  1. 定义Tabs组件：在主页面中定义Tabs组件，并为其绑定状态变量。例如，使用@State装饰器来管理当前选中的Tab索引。

  2. 传递状态：通过页面路由参数或组件属性传递Tabs组件的状态到其他页面。可以使用@Prop或@Link装饰器来接收和同步这些状态。

  3. 复用Tabs组件：在其他页面中复用Tabs组件，并确保其状态与主页面保持同步。通过状态管理，Tabs组件在多个页面中显示时能够保持一致的行为和外观。

例如，以下是一个简化的代码示例：

// 主页面
@Entry
@Component
struct MainPage {
  @State selectedIndex: number = 0;

  build() {
    Column() {
      Tabs({ index: this.selectedIndex }) {
        TabContent('Tab 1')
        TabContent('Tab 2')
      }
      .onChange((index: number) => {
        this.selectedIndex = index;
      })

      Button('Go to Other Page')
        .onClick(() => {
          router.push({ url: 'pages/OtherPage', params: { selectedIndex: this.selectedIndex } });
        })
    }
  }
}

// 其他页面
@Component
struct OtherPage {
  @Prop selectedIndex: number;

  build() {
    Column() {
      Tabs({ index: this.selectedIndex }) {
        TabContent('Tab 1')
        TabContent('Tab 2')
      }
      .onChange((index: number) => {
        this.selectedIndex = index;
      })
    }
  }
}

通过这种方式，Tabs组件可以在多个页面中共享并保持同步。

回到顶部