HarmonyOS 鸿蒙Next中使用 Tabs + NavDestination 实现底部导航栏与页面栈管理

应用场景

我们几乎99.99%的应用都需要创建底部菜单，比如一个包含 **3个标签页（首页、分类、我的）**​ 这种底部菜单的应用，用户点击底部标签可切换页面，每个页面显示不同的内容（如首页显示轮播图，分类页显示列表，我的页显示用户信息）

实现思路

核心使用鸿蒙os为我们提供的 2大组件Tabs组件和Navigator组件。通过Tabs组件来实现 底部标签栏导航，用户通过点击不同标签切换页面。通过Navigator组件来实现 页面路由跳转及 页面间参数传递​ 与 返回逻辑。

我们创建分类、首页、我的几个页面来实现。

完整代码

主要的入口文件，通过 Tabs实现底部标签 菜单栏目。引入首页、分类和 我的几个页面进行路由跳转。

// MainPage.ets
import { HomePage } from "./HomePage"
import { CategoryPage } from "./CategoryPage"
import {ProfilePage} from  "./ProfilePage"

@Entry
@Component
struct MainPage {
  build() {
    Tabs({ barPosition: BarPosition.End }) {
      // Tab 1: 首页（支持内部跳转）
      TabContent() {
        Navigation() {
          HomePage()
        }
      }
      .tabBar('首页')

      // Tab 2: 分类（简单页面）
      TabContent() {
        CategoryPage()
      }
      .tabBar('分类')

      // Tab 3: 我的
      TabContent() {
        ProfilePage()
      }
      .tabBar('我的')
    }
    .width('100%')
    .height('100%')
  }
}

主页

import { router } from '@kit.ArkUI';

// pages/HomePage.ets
@Entry
@Component
struct HomePage {
  @State scrollOffset: number = 0;
  @State searchText: string = '';
  private scroller: Scroller = new Scroller();
  @State cartItems: string[] = ["1","2","3","4","5"];

  build() {
    Scroll(this.scroller) {
      Column({ space: 20 }) {
        // 搜索框（验证输入状态保留）
        TextInput({ placeholder: '在首页搜索商品...' })
          .onChange((value: string) => {
            this.searchText = value;
          })
          .width('90%')
          .height(45)
          .borderRadius(20)
          .padding({ left: 16 })
          .backgroundColor('#F5F5F5')

        Text(`当前搜索: "${this.searchText}"`)
          .fontColor('#666')
          .fontSize(14)

        Text('首页 - 滚动测试')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        // 长列表模拟
        ForEach(
          Array.from(this.cartItems, (_, i) => i),
          (item: number) => {
            Row() {
              Text(`首页内容 ${item + 1}`)
                .width('100%')
                .height(60)
                .backgroundColor('#E6F7FF')
                .textAlign(TextAlign.Center)
                .borderRadius(8)
            }
          }
        )

        Button('查看商品详情')
          .width(200)
          .height(45)
          .backgroundColor('#007DFF')
          .onClick(() => {
            router.pushUrl({ url: "pages/1211/DetailPage" });
          })
      }
      .padding(20)
      .width('100%')
    }
    .scrollable(ScrollDirection.Vertical)
  }
}

export { HomePage };

我的页面

// pages/ProfilePage.ets
@Entry
@Component
struct ProfilePage {
  @State userName: string = '鸿蒙用户';
  @State isVip: boolean = false;

  build() {
    Scroll() {
      Column({ space: 25 }) {
        // 用户头像区
        Column() {
          Image($r('app.media.startIcon'))
            .width(80)
            .height(80)
            .borderRadius(40)
            .backgroundColor('#E0E0E0')
            .margin({ top: 40 })
          Text(this.userName)
            .fontSize(18)
            .margin({ top: 10 })
          if (this.isVip) {
            Text('VIP会员')
              .fontColor('#FFA500')
              .fontSize(14)
          }
        }

        // 功能入口
        GridRow() {
          this.createGridItem('订单中心')
          this.createGridItem('收货地址')
          this.createGridItem('客服帮助')
          this.createGridItem('系统设置')
        }
        .width('100%')
        .margin({ top: 30 })

        // 切换 VIP 按钮（验证交互状态保留）
        Button(this.isVip ? '取消VIP' : '开通VIP')
          .width(200)
          .height(45)
          .backgroundColor(this.isVip ? '#ccc' : '#007DFF')
          .onClick(() => {
            this.isVip = !this.isVip;
          })
          .margin({ top: 20, bottom: 60 })
      }
      .width('100%')
    }
  }

  @Builder
  createGridItem(title: string) {
    GridCol({ span: { xs: 6, sm: 6, md: 6 } }) {
      Column({ space: 8 }) {
        Image($r('app.media.startIcon')) // 占位图标
          .width(24)
          .height(24)
          .backgroundColor('#E0E0E0')
          .borderRadius(4)
        Text(title)
          .fontSize(14)
          .fontColor('#333')
      }
      .width('100%')
      .height(80)
      .backgroundColor('#F8F9FA')
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)
    }
  }
}

export {ProfilePage}

分类页面

// pages/CategoryPage.ets
@Entry
@Component
struct CategoryPage {
  @State selectedCategory: string = '全部';
  private categories: string[] = ['全部', '手机', '电脑', '家电', '服饰'];
  @State cartItems: string[] = ["1","2","3","4","5"];

  build() {
    Column({ space: 15 }) {
      Text('商品分类')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })

      // 分类标签栏
      Row() {
        ForEach(
          this.categories,
          (item: string) => {
            Button(item)
              .width(80)
              .height(36)
              .fontSize(14)
              .backgroundColor(this.selectedCategory === item ? '#007DFF' : '#E0E0E0')
              .fontColor(this.selectedCategory === item ? Color.White : Color.Black)
              .onClick(() => {
                this.selectedCategory = item;
              })
          }
        )
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)

      // 分类内容区
      Text(`当前选中: ${this.selectedCategory}`)
        .fontSize(16)
        .margin({ top: 20 })

      List({ space: 10 }) {
        ForEach(
          Array.from(this.cartItems, (_, i) => i),
          (item: number) => {
            ListItem() {
              Text(`${this.selectedCategory}商品 ${item + 1}`)
                .padding(15)
                .width('100%')
                .borderRadius(8)
                .backgroundColor('#FFF8E1')
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
  }
}

export { CategoryPage };

详情页面

import { router } from '@kit.ArkUI'

@Entry
@Component
struct DetailPage {
  build() {
    Column({ space: 20 }) {
      Text('商品详情页')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50 })

      Text('这是从首页跳转过来的详情页')
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .width('80%')

      Button('返回')
        .width(150)
        .height(45)
        .margin({ top: 30 })
        .onClick(() => {
          router.back();
        })
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

整体效果如下