HarmonyOS应用开发实战：萌宠日记 - 组件实现底部导航栏

NianDeng2026

242人浏览 · 2026-07-21 23:52:36

NianDeng2026 · 2026-07-21 23:52:36 发布

页面预览

前言

底部导航栏 是移动应用中最常见的导航模式之一，它让用户能够快速在 核心功能模块 之间切换。在 萌宠日记 中，我们使用 Tabs 组件 实现了包含 首页、日记、记录、统计、我的 五个 Tab 的底部导航架构。

本文将从 萌宠日记 的 Index.ets 出发，深度解析 Tabs 组件的核心 API、布局参数、交互事件，以及如何构建一个完整的底部导航栏。

一、Tabs 组件概述

1.1 组件简介

Tabs 是 HarmonyOS 提供的 页签容器组件，通过 TabContent 定义每个页签的内容，通过 TabBar 定义页签栏的样式。

组件	角色	说明
`Tabs`	容器	管理所有 Tab 的切换和布局
`TabContent`	内容页	每个 Tab 对应的页面内容
`TabBar`	页签栏	显示 Tab 标题和图标

1.2 萌宠日记的完整实现

// Index.ets — Tabs 底部导航栏完整实现
@Entry
@Component
struct Index {
  @State currentIndex: number = 0

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      // Tab 1: 首页
      TabContent() {
        // 首页内容...
      }
      .tabBar(this.TabBarBuilder('🏠', '首页', 0))

      // Tab 2: 日记
      TabContent() {
        // 日记内容...
      }
      .tabBar(this.TabBarBuilder('📝', '日记', 1))

      // Tab 3: 记录
      TabContent() {
        // 记录内容...
      }
      .tabBar(this.TabBarBuilder('📋', '记录', 2))

      // Tab 4: 统计
      TabContent() {
        // 统计内容...
      }
      .tabBar(this.TabBarBuilder('📊', '统计', 3))

      // Tab 5: 我的
      TabContent() {
        // 个人中心内容...
      }
      .tabBar(this.TabBarBuilder('👤', '我的', 4))
    }
    .onChange((index: number) => {
      this.currentIndex = index
    })
    .barMode(BarMode.Fixed)
    .backgroundColor('#FFF8F0')
  }
}

提示：Tabs({ barPosition: BarPosition.End }) 中的 barPosition 参数控制页签栏的位置，End 表示底部。这是实现底部导航栏的关键参数。

二、BarPosition 位置控制

2.1 四种位置模式

Tabs({ barPosition: BarPosition.End })  // 底部导航（萌宠日记使用）

BarPosition 支持四种位置：

枚举值	位置	适用场景	示例
`BarPosition.Start`	顶部	顶部选项卡	分类切换
`BarPosition.End`	底部	底部导航栏	✅ 萌宠日记
`BarPosition.Left`	左侧	侧边栏导航	平板/PC 布局
`BarPosition.Right`	右侧	右侧导航	特殊布局

2.2 位置选择考量

萌宠日记 选择底部导航的原因：

移动端习惯：大多数用户习惯底部导航操作
单手操作：底部按钮更易触及
内容优先：顶部留给内容展示，不占用核心区域
5 个 Tab 适中：底部导航适合 3-5 个 Tab

三、TabContent 内容页

3.1 内容页结构

每个 TabContent 对应一个功能模块：

// Tab 1: 首页
TabContent() {
  Navigation(this.homeStack) {
    HomePage({
      onNavigateToPetProfile: () => {
        this.homeStack.pushPath({ name: 'petProfile' })
      },
      onNavigateToTimeline: () => {
        this.homeStack.pushPath({ name: 'timeline' })
      },
      onNavigateToCommunity: () => {
        this.homeStack.pushPath({ name: 'community' })
      }
    })
  }
  .hideTitleBar(true)
  .navDestination(this.HomeNavDestinations)
}
.tabBar(this.TabBarBuilder('🏠', '首页', 0))

3.2 TabContent 与 Navigation 嵌套

萌宠日记的每个 TabContent 内部嵌套了 Navigation 组件，形成 Tab → Navigation → 页面 的三层结构：

层级	组件	职责
第一层	`Tabs`	管理 Tab 切换
第二层	`Navigation`	管理子页面栈
第三层	具体页面	展示内容

四、TabBar 自定义构建

4.1 tabBar 属性

tabBar 属性接收一个 @Builder 参数，用于自定义 Tab 栏的渲染：

.tabBar(this.TabBarBuilder('🏠', '首页', 0))

4.2 TabBarBuilder 实现

@Builder
TabBarBuilder(icon: string, label: string, index: number) {
  Column() {
    Text(icon)
      .fontSize(24)
      .fontColor(this.currentIndex === index ? '#F5A623' : '#999999')
    Text(label)
      .fontSize(10)
      .fontColor(this.currentIndex === index ? '#F5A623' : '#999999')
      .margin({ top: 2 })
  }
  .width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Center)
}

4.3 自定义 TabBar 的优势

对比	默认 TabBar	自定义 TabBar
图标支持	有限	任意组件（Emoji、图片、自定义绘制）
样式控制	受限	完全控制颜色、大小、间距
选中态	系统默认	自定义高亮效果
布局	固定	灵活布局

五、onChange 切换事件

5.1 事件绑定

Tabs() {
  // TabContent 列表...
}
.onChange((index: number) => {
  this.currentIndex = index
  // 可在此处添加 Tab 切换时的逻辑
})

5.2 切换事件的应用场景

场景	实现方式	萌宠日记是否使用
更新选中态样式	`this.currentIndex = index`	✅ 已使用
切换时加载数据	在 onChange 中触发数据加载	可扩展
埋点统计	记录 Tab 切换行为	可扩展
页面状态刷新	恢复/暂停页面动画	可扩展

六、BarMode 显示模式

6.1 Fixed 模式

.barMode(BarMode.Fixed)  // 固定模式

BarMode 有两种模式：

模式	说明	适用场景
`BarMode.Fixed`	所有 Tab 固定宽度，平分导航栏	Tab 数量少（≤5）
`BarMode.Scrollable`	Tab 可滚动，超出屏幕时左右滑动	Tab 数量多（>5）

6.2 萌宠日记的选择

萌宠日记使用 BarMode.Fixed，原因如下：

5 个 Tab 刚好占满底部导航栏宽度
每个 Tab 宽度均匀，视觉平衡
无需滚动，操作直观

七、Tabs 容器属性

7.1 完整属性配置

Tabs({
  barPosition: BarPosition.End,  // 底部导航栏
  index: 0,                       // 默认选中第 0 个 Tab
  controller: new TabsController() // Tab 控制器，可用于编程切换
}) {
  // TabContent 列表...
}
.onChange((index: number) => {})   // 切换回调
.barMode(BarMode.Fixed)            // 固定模式
.vertical(false)                   // 水平方向
.backgroundColor('#FFF8F0')        // 容器背景色

7.2 属性对照表

属性	类型	默认值	萌宠日记配置
`barPosition`	`BarPosition`	`BarPosition.Start`	`BarPosition.End`
`index`	`number`	`0`	未显式指定（默认 0）
`controller`	`TabsController`	—	未使用
`barMode`	`BarMode`	`BarMode.Fixed`	`BarMode.Fixed`
`vertical`	`boolean`	`false`	未显式指定
`onChange`	回调	—	已绑定

八、TabsController 编程控制

8.1 控制器使用

// 使用 TabsController 编程切换 Tab
@Entry
@Component
struct Index {
  private tabsController: TabsController = new TabsController()

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
        // TabContent 列表...
      }

      // 外部按钮控制 Tab 切换
      Button('切换到日记')
        .onClick(() => {
          this.tabsController.changeIndex(1)  // 切换到第 1 个 Tab
        })
    }
  }
}

8.2 控制器方法

方法	说明	参数
`changeIndex(index: number)`	切换到指定索引的 Tab	`index`: Tab 索引

九、Tabs 的布局与样式

9.1 容器样式

Tabs() {
  // TabContent 列表...
}
.barMode(BarMode.Fixed)
.backgroundColor('#FFF8F0')  // 背景色与页面主题一致

9.2 底部导航栏高度

底部导航栏的高度由系统根据 安全区域 自动适配，开发者无需手动设置。系统会考虑：

底部安全区域（全面屏手势指示条）
TabBar 内容高度（图标 + 文字）
最小触摸目标（建议 ≥ 48dp）

十、常见问题与调试

10.1 问题排查

问题	可能原因	解决方案
Tab 切换内容不更新	@State 状态未正确绑定	检查 `currentIndex` 是否更新
TabBar 显示异常	@Builder 参数传递错误	检查 `TabBarBuilder` 参数类型
底部导航栏位置不对	`barPosition` 设置错误	确认使用 `BarPosition.End`
Tab 切换时闪烁	页面内容重新创建	使用 `@State` 保持页面状态

10.2 调试技巧

// 在 onChange 中添加日志，跟踪 Tab 切换
.onChange((index: number) => {
  console.log(`Tab switched to: ${index}`)
  this.currentIndex = index
})

总结

本文从 萌宠日记 的 Tabs 组件 实现出发，深入解析了底部导航栏的完整构建方法：

Tabs 组件：容器、TabContent、TabBar 三层结构
BarPosition：底部导航栏的 End 模式
TabContent 内容页：嵌套 Navigation 实现子页面导航
自定义 TabBar：通过 @Builder 实现图标 + 标签的 Tab 样式
onChange 事件：Tab 切换时的状态更新
BarMode：Fixed 固定模式 vs Scrollable 滚动模式
TabsController：编程控制 Tab 切换

Tabs 组件是 HarmonyOS 底部导航栏的基石，理解其核心 API 和布局参数，是构建复杂导航架构的第一步。

下一篇我们将深入 自定义 TabBar 设计与图标渲染，解析 @Builder 装饰器的更多高级用法。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

Tabs 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-tabs
TabContent 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-tabcontent
@Builder 装饰器：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-builder
Navigation 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation
ArkUI 布局基础：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui-layout
状态管理概述：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state-management
应用导航设计：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/design-navigation
响应式布局指导：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/responsive-layout

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

【开发者故事】集成 HarmonyOS App Linking 能力，搜觅 App 重塑高效专注搜索新体验

HarmonyOS开发者社区

HarmonyOS UIAbility 启动参数丢失怎么办：Want 和页面路由怎么接住

HarmonyOS开发者社区

HarmonyOS应用实战-启示散页-42-收藏导出别混进私密问题：导出前先做字段筛选和用户确认

它可能含来源题库 id、用户自定义题库名称、答案文本、内部时间戳，未来还会添加诊断字段。直接看似方便，却把“存什么”与“允许分享什么”绑死了。

HarmonyOS开发者社区

所有评论(0)

查看更多评论

NianDeng2026

@NianDeng2026

已为社区贡献11条内容

HarmonyOS应用开发实战：萌宠日记 - 组件实现底部导航栏

NianDeng2026

前言

一、Tabs 组件概述

1.1 组件简介

1.2 萌宠日记的完整实现

二、BarPosition 位置控制

2.1 四种位置模式

2.2 位置选择考量

三、TabContent 内容页

3.1 内容页结构

3.2 TabContent 与 Navigation 嵌套

四、TabBar 自定义构建

4.1 tabBar 属性

4.2 TabBarBuilder 实现

4.3 自定义 TabBar 的优势

五、onChange 切换事件

5.1 事件绑定

5.2 切换事件的应用场景

六、BarMode 显示模式

6.1 Fixed 模式

6.2 萌宠日记的选择

七、Tabs 容器属性

7.1 完整属性配置

7.2 属性对照表

八、TabsController 编程控制

8.1 控制器使用

8.2 控制器方法

九、Tabs 的布局与样式

9.1 容器样式

9.2 底部导航栏高度

十、常见问题与调试

10.1 问题排查

10.2 调试技巧

总结

所有评论(0)

温馨提示：您尚未绑定手机号

NianDeng2026