鸿蒙Next中tabs和navigation怎么选择使用

在鸿蒙Next开发中，遇到页面导航时不清楚该用Tabs还是Navigation组件？它们的具体适用场景有什么区别？比如要实现底部标签页切换和页面层级跳转，分别该选哪个组件？求有经验的开发者分享最佳实践和使用建议。

2 回复

鸿蒙Next里，Tabs适合横向内容分类，比如App底部导航；Navigation适合层级跳转，比如页面栈管理。简单说：横向切换用Tabs，纵向深入用Navigation。别搞反了，不然用户会像在迷宫里找厕所——急死但出不来！

更多关于鸿蒙Next中tabs和navigation怎么选择使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，Tabs 和 Navigation 是两种常见的导航组件，选择取决于应用结构和交互需求：

1. Tabs（标签页）

  • 适用场景：适用于内容分类平级、用户需频繁切换视图的场景（如新闻分类、商品类别）。
  • 特点：
    • 顶部或底部固定显示多个标签，点击直接切换内容。
    • 内容区域通常在同一页面内更新，无需跳转新页面。
    • 适合展示相关性强的并列信息。
  • 示例代码（ArkTS）：
    [@Entry](/user/Entry)
[@Component](/user/Component)
struct TabExample {
  @State currentIndex: number = 0

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() { Text('首页').fontSize(20) }
          .tabBar('首页')
        TabContent() { Text('发现').fontSize(20) }
          .tabBar('发现')
        TabContent() { Text('我的').fontSize(20) }
          .tabBar('我的')
      }
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }
  }
}

2. Navigation（导航容器）

  • 适用场景：适用于层级结构明显的任务流，如主页面→详情页→设置页。
  • 特点：
    • 以栈管理页面，支持前进（跳转）和后退（返回）操作。
    • 通常配合导航栏（如标题栏、返回按钮）使用。
    • 适合需要记录用户操作路径的场景。
  • 示例代码（ArkTS）：
    [@Entry](/user/Entry)
[@Component](/user/Component)
struct NavExample {
  @State path: string = ''

  build() {
    Navigation(this.path) {
      Column() {
        Text('主页').fontSize(30)
        Button('跳转到详情页')
          .onClick(() => {
            this.path = 'details'
          })
      }
    }
    .title('主页')
    .navDestination(this.path, (path: string) => {
      if (path === 'details') {
        NavDestination() {
          Column() {
            Text('详情页').fontSize(30)
            Button('返回').onClick(() => { this.path = '' })
          }
        }
      }
    })
  }
}

选择建议：

  • 用 Tabs：内容模块并列，用户需快速横向切换（如电商首页、社交动态）。
  • 用 Navigation：流程有明确层级，需逐层深入并支持返回（如设置、表单填写）。

若需结合两者，常见做法是 Tabs 作为 Navigation 的根页面，例如主界面用 Tabs 管理几个主要模块，每个 Tab 内再通过 Navigation 处理子页面跳转。

回到顶部