HarmonyOS鸿蒙Next中navigation左右栏布局＋tabs问题

HarmonyOS鸿蒙Next中navigation左右栏布局＋tabs问题

有两个tabs（首页和我的）打开展示首页push到NavDestination，点击我的，右侧页面还是首页push过去的NavDestination，怎么处理这个问题

@Entry
@Component
struct Index {
  @Provide('page') page: NavPathStack = new NavPathStack()

  @Builder
  map(name: string) {
    if (name === 'home') {
      Home()
    } else if (name === 'my') {
      My()
    }
  }

  build() {
    Navigation(this.page) {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Column() {
            Button('跳转到首页的右侧NavDestination')
              .onClick(() => {
                this.page.pushPath({ name: 'home' })
              })
          }.width('100%')
          .height('100%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor(Color.Pink)
        }.tabBar('首页')

        TabContent() {
          Column() {
            Button('跳转到我的的右侧NavDestination')
              .onClick(() => {
                this.page.pushPath({ name: 'my' })
              })
          }.width('100%')
          .height('100%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor(Color.Orange)
        }.tabBar('首页')
      }

    }.hideTitleBar(true)
    .hideToolBar(true)
    .navBarWidth(300)
    .navDestination(this.map)
  }
}

@Builder
export function HomeBuilder() {

  Home()

}

@Component
struct Home {
  @Consume('page') page: NavPathStack

  build() {
    NavDestination() {
      Column() {
        Button('首页的右侧NavDestination')
      }.width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.Pink)
    }.onReady((context) => {
      this.page = context.pathStack
    })
  }
}

@Builder
export function MyBuilder() {
  My()
}

@Component
struct My {
  @Consume('page') page: NavPathStack

  build() {
    NavDestination() {
      Column() {
        Button('首页的右侧NavDestination')
      }.width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.Orange)
    }.onReady((context) => {
      this.page = context.pathStack
    })
  }
}

更多关于HarmonyOS鸿蒙Next中navigation左右栏布局＋tabs问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

你好，抱歉没太搞懂你描述的意思，当前的现状不就是你有一个粉色的首页tab页和一个橙色的我的tab页，然后每个tab页有个单独的按钮，点击会跳转到对应颜色的NavDestination页面，你遇到的具体问题或者想实现的具体效果是啥？

更多关于HarmonyOS鸿蒙Next中navigation左右栏布局＋tabs问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在平板的布局中，首先点击首页的按钮进入首页的NavDestination，再切换到我的页面，右侧还是展示首页的NavDestination，

要求是第一个tabs有一个按钮跳到第二个界面再次点击第二个界面的按钮进入三个界面，当我点击第二个tabs，应该会清空右侧的内容（展示第二个tabs页面的内容），我再次点击第一个tabs应该会记录点击第二个tabs的之前的NavDestination信息并展示（可以参考平板微信和电脑微信）难道要每个tabs都添加一个navigation组件？

仔细看我发的GIF视频，

点击tabs中的 浏览 再点击左侧我的手机，在点击右侧的Download进入我的手机页面，

再点击tabs中的 最近 并清空右侧内容，在回来tabs中的浏览页面并展示右侧内容的我的手机

IMG_3342.gif

在HarmonyOS Next中实现navigation左右栏布局结合tabs，可使用NavigationContainer和Column组件构建主框架。左侧栏用Row嵌套Column，右侧主内容区用Tabs组件。配置TabContent时需指定对应子页面，通过@State变量控制选中状态。关键代码示例：

struct MainPage {
  @State currentTab: number = 0
  
  build() {
    Row() {
      // 左侧栏
      Column() {}
      
      // 右侧主内容
      Tabs({ barPosition: BarPosition.Start }) {
        TabContent() {}
        TabContent() {}
      }
    }
  }
}

注意tab切换与路由参数的同步处理。

问题出在NavPathStack的共享使用上。在您的代码中，两个tab页共享同一个page实例，导致切换tab时右侧内容不会重置。

解决方案是为每个tab维护独立的NavPathStack状态。修改如下：

  1. 将@Provide(‘page’)改为两个独立的@State变量：
[@State](/user/State) homePage: NavPathStack = new NavPathStack()
[@State](/user/State) myPage: NavPathStack = new NavPathStack()
  1. 修改Navigation组件，根据当前tab选择对应的pathStack：
Navigation(this.currentTab === 'home' ? this.homePage : this.myPage)
  1. 在TabContent的点击事件中使用对应的pathStack：
.onClick(() => {
  this.homePage.pushPath({name: 'home'})  // 首页tab
  // 或
  this.myPage.pushPath({name: 'my'})  // 我的tab
})
  1. 在Home和My组件中分别使用对应的@Consume装饰器

这样每个tab页都会维护自己独立的导航栈，切换tab时右侧内容会正确重置。注意在Tab切换时需要同步更新currentTab状态。

回到顶部