一、应用概述底部导航Bottom Navigation是一个模拟主流 App 底部 Tab 切换的演示应用。四个标签页首页、发现、消息、我的各自关联不同的页面内容点击标签平滑切换内容区域。底部导航栏是移动应用中最常见的导航模式iOS 的 UITabBar 和 Android 的 BottomNavigationView 都采用类似设计。在 HarmonyOS 中底部导航的实现没有使用专门的 TabBar 组件虽然有Tabs组件而是通过RowForEach手动构建导航栏配合State状态驱动内容切换。这种「造轮子」的方式反而让我们更深入地理解了状态驱动的本质。二、技术架构2.1 应用结构┌─────────────────────────────────────┐ │ ‹ 返回 底部导航 │ ├─────────────────────────────────────┤ │ │ │ 大图标 │ │ │ │ 欢迎来到底部导航演示 │ │ 这是首页的内容区域 │ │ 可以放置各种信息和功能卡片 │ │ │ │ │ ├─────────────────────────────────────┤ │ │ ← 底部导航栏 │ 首页 发现 消息 我的 │ └─────────────────────────────────────┘2.2 数据模型interface TabItem { title: string; // 标签名称 icon: string; // emoji 图标 content: string; // 页面内容含换行符 color: string; // 标签主题色选中时使用 }2.3 状态变量变量类型用途currentTabnumber当前选中的标签索引0-3tabsTabItem[]4 个标签的配置数据三、核心代码深度解析3.1 状态驱动的 Tab 切换State currentTab: number 0;仅用一个number类型的State变量就驱动了整个页面的切换。这个数字既是底部导航栏的选中索引也是内容区域的显示索引。内容区域Column() { Text(this.tabs[this.currentTab].icon).fontSize(64).margin({ bottom: 16 }) Text(this.tabs[this.currentTab].content) .fontSize(16).fontColor(#555).lineHeight(28).textAlign(TextAlign.Center) } .layoutWeight(1).justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center)通过this.currentTab索引tabs数组动态获取当前标签的 icon、content 和 color。这是 ArkUI 中「数据驱动 UI」最直接的体现——只需更新currentTab所有相关 UI 自动刷新。3.2 底部导航栏Row() { ForEach(this.tabs, (tab: TabItem, idx: number) { Column() { Text(tab.icon).fontSize(22) .opacity(this.currentTab idx ? 1 : 0.5) Text(tab.title).fontSize(11) .fontColor(this.currentTab idx ? tab.color : #999) .fontWeight(this.currentTab idx ? FontWeight.Medium : FontWeight.Regular) } .layoutWeight(1) .padding({ top: 6, bottom: 6 }) .onClick(() { this.currentTab idx }) }) } .width(100%).height(64) .backgroundColor(#fff) .borderRadius({ topLeft: 16, topRight: 16 }) .shadow({ radius: 8, color: #20000000, offsetY: -2 })导航栏的样式设计属性值说明高度64标准导航栏高度符合人体工学背景色#fff纯白背景圆角{ topLeft: 16, topRight: 16 }仅顶部圆角与底部边缘平滑过渡阴影offsetY: -2向上偏移产生「浮在内容之上」的效果选中/未选中状态对比样式属性未选中选中图标透明度0.51.0文字颜色#999灰色tab.color主题色文字字重RegularMedium这种「透明度颜色字重」的三重区分确保了选中状态的清晰可辨同时保持了整体视觉的协调性。3.3 圆角与阴影的巧妙运用.borderRadius({ topLeft: 16, topRight: 16 }) .shadow({ radius: 8, color: #20000000, offsetY: -2 })borderRadius 对象语法ArkUI 支持为四个角分别设置圆角半径格式为{ topLeft, topRight, bottomLeft, bottomRight }。这里只设定了顶部两个角的圆角底部紧贴屏幕边缘形成悬浮导航栏的效果。阴影向上偏移offsetY: -2表示阴影向上偏移 2vp配合radius: 8较大的模糊半径产生导航栏「浮在内容上方」的视觉效果。这与 Material Design 的 Bottom App Bar 设计语言一致。四、HarmonyOS 特色功能深度解析4.1 layoutWeight 弹性布局.layoutWeight(1)每个 Tab 项都设置layoutWeight(1)在Row容器中等分宽度。无论屏幕宽度是 360vp 还是 428vp四个 Tab 自动平分底部空间。layoutWeight 的计算规则先分配所有未设置layoutWeight的组件的固定宽度剩余空间按layoutWeight值比例分配给设置了该属性的组件如果所有子组件都设置了layoutWeight(1)则等分总宽度4.2 ForEach 的索引参数ForEach(this.tabs, (tab: TabItem, idx: number) { // idx 就是当前项的索引 .onClick(() { this.currentTab idx }) })ForEach的回调函数可以接收两个参数第一个参数数组中的元素值第二个参数元素在数组中的索引从 0 开始使用索引参数可以避免为每个 Tab 手动绑定onClick事件这是 ForEach 简化代码的重要特性。4.3 Text 组件的多行内容content: 欢迎来到底部导航演示\n\n这是首页的内容区域\n可以放置各种信息和功能卡片在Text组件中使用\n换行符可以实现多行文本显示配合lineHeight属性控制行间距。这是最简单的内容换行方式不需要使用多个Text组件堆叠。五、UI/UX 设计分析5.1 四标签导航四个标签覆盖了主流 App 的标准导航结构标签图标主题色典型用途首页#0077FF蓝色内容信息流发现#4CAF50绿色搜索/探索消息#FF9800橙色通知/聊天我的#9C27B0紫色个人中心色彩心理学四种主题色分别代表不同的功能属性——蓝色专业、绿色自然、橙色活跃、紫色创意。5.2 沉浸式导航栏设计底部导航栏的设计借鉴了现代移动操作系统的设计语言悬浮效果白色背景 顶部圆角 向上阴影模拟物理悬浮触控热区padding({ top: 6, bottom: 6 })确保每个 Tab 的点击区域足够大至少 44vp 的触控高度视觉权重图标 22px 文字 11px图标视觉权重更大易于识别5.3 内容区域设计内容区域居中显示大图标和欢迎文字图标fontSize(64)大尺寸图标形成视觉焦点文字lineHeight(28)舒适的阅读行距textAlign(TextAlign.Center)居中排列六、最佳实践与优化建议6.1 当前代码亮点极简状态管理仅用currentTab一个变量完成全部切换逻辑数据驱动 UI所有显示内容来自tabs数组新增标签只需修改数据导航栏悬浮设计圆角 阴影营造沉浸视觉体验Tab 等分布局layoutWeight(1)实现自适应宽度6.2 可优化方向// 优化建议 1页面切换动画 // 使用 transition 添加页面切换动画 Column() .transition({ type: TransitionType.Insert, translate: { x: 100 } }) .transition({ type: TransitionType.Delete, translate: { x: -100 } }) // 优化建议 2使用 Tabs 组件替代手动构建 // HarmonyOS 提供了 Tabs TabContent 原生组件 Tabs() { TabContent() { /* 首页内容 */ }.tabBar( 首页) TabContent() { /* 发现内容 */ }.tabBar( 发现) TabContent() { /* 消息内容 */ }.tabBar( 消息) TabContent() { /* 我的内容 */ }.tabBar( 我的) } .barPosition(BarPosition.End) // 导航栏在底部 // 优化建议 3角标通知 // 在 Tab 图标上显示未读数量 Stack() { Text(tab.icon).fontSize(22) if (unreadCount 0) { Text(unreadCount 99 ? 99 : unreadCount.toString()) .fontSize(10).fontColor(#fff) .backgroundColor(#F44336).borderRadius(8) .padding({ left: 4, right: 4 }).height(16) .align(Alignment.TopEnd) } } // 优化建议 4页面缓存 // 使用 State 保存每个 Tab 的滚动位置 State scrollPositions: number[] [0, 0, 0, 0]; // 优化建议 5导航栏隐藏/显示 // 根据内容滚动方向自动隐藏/显示导航栏 State navBarVisible: boolean true;6.3 性能优化Tab 数量控制底部导航建议不超过 5 个 TabMaterial Design 规范超过时需使用「更多」折叠或滚动模式内容懒加载当前实现中 4 个 Tab 的内容同时存在通过currentTab控制显示对于内容较重的页面应使用懒加载图标性能使用 emoji 而非图片图标减少资源加载开销七、总结与扩展底部导航应用展示了 ArkUI 中实现 Tab 导航的核心模式知识点应用位置重要程度State 状态驱动currentTab 切换★★★★★layoutWeight 弹性布局Tab 等分★★★★★ForEach 索引参数onClick 事件绑定★★★★☆borderRadius 对象语法导航栏圆角★★★☆☆shadow 阴影悬浮效果★★★☆☆扩展思路与 Tabs 组件对比学习 HarmonyOS 原生Tabs组件的 API了解手动构建与原生组件的权衡中间大按钮部分 App 在底部导航栏中间放置大按钮如发帖按钮可通过Stack布局实现导航栏颜色跟随根据所在 Tab 的主题色改变导航栏颜色返回拦截配合onBackPress实现双击退出或确认提示跨页面状态保持使用AppStorage在页面切换时保持 Tab 状态手势切换添加左右滑动手势SwipeGesture切换 Tab底部导航是现代移动应用的标准导航模式。通过这个案例你不仅学会了如何构建底部导航栏更理解了状态驱动的本质——一个数字的变化驱动整个页面的重新渲染。这就是声明式 UI 的核心思想UI 是状态的函数。
一、应用概述底部导航Bottom Navigation是一个模拟主流 App 底部 Tab 切换的演示应用。四个标签页首页、发现、消息、我的各自关联不同的页面内容点击标签平滑切换内容区域。底部导航栏是移动应用中最常见的导航模式iOS 的 UITabBar 和 Android 的 BottomNavigationView 都采用类似设计。在 HarmonyOS 中底部导航的实现没有使用专门的 TabBar 组件虽然有Tabs组件而是通过RowForEach手动构建导航栏配合State状态驱动内容切换。这种「造轮子」的方式反而让我们更深入地理解了状态驱动的本质。二、技术架构2.1 应用结构┌─────────────────────────────────────┐ │ ‹ 返回 底部导航 │ ├─────────────────────────────────────┤ │ │ │ 大图标 │ │ │ │ 欢迎来到底部导航演示 │ │ 这是首页的内容区域 │ │ 可以放置各种信息和功能卡片 │ │ │ │ │ ├─────────────────────────────────────┤ │ │ ← 底部导航栏 │ 首页 发现 消息 我的 │ └─────────────────────────────────────┘2.2 数据模型interface TabItem { title: string; // 标签名称 icon: string; // emoji 图标 content: string; // 页面内容含换行符 color: string; // 标签主题色选中时使用 }2.3 状态变量变量类型用途currentTabnumber当前选中的标签索引0-3tabsTabItem[]4 个标签的配置数据三、核心代码深度解析3.1 状态驱动的 Tab 切换State currentTab: number 0;仅用一个number类型的State变量就驱动了整个页面的切换。这个数字既是底部导航栏的选中索引也是内容区域的显示索引。内容区域Column() { Text(this.tabs[this.currentTab].icon).fontSize(64).margin({ bottom: 16 }) Text(this.tabs[this.currentTab].content) .fontSize(16).fontColor(#555).lineHeight(28).textAlign(TextAlign.Center) } .layoutWeight(1).justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center)通过this.currentTab索引tabs数组动态获取当前标签的 icon、content 和 color。这是 ArkUI 中「数据驱动 UI」最直接的体现——只需更新currentTab所有相关 UI 自动刷新。3.2 底部导航栏Row() { ForEach(this.tabs, (tab: TabItem, idx: number) { Column() { Text(tab.icon).fontSize(22) .opacity(this.currentTab idx ? 1 : 0.5) Text(tab.title).fontSize(11) .fontColor(this.currentTab idx ? tab.color : #999) .fontWeight(this.currentTab idx ? FontWeight.Medium : FontWeight.Regular) } .layoutWeight(1) .padding({ top: 6, bottom: 6 }) .onClick(() { this.currentTab idx }) }) } .width(100%).height(64) .backgroundColor(#fff) .borderRadius({ topLeft: 16, topRight: 16 }) .shadow({ radius: 8, color: #20000000, offsetY: -2 })导航栏的样式设计属性值说明高度64标准导航栏高度符合人体工学背景色#fff纯白背景圆角{ topLeft: 16, topRight: 16 }仅顶部圆角与底部边缘平滑过渡阴影offsetY: -2向上偏移产生「浮在内容之上」的效果选中/未选中状态对比样式属性未选中选中图标透明度0.51.0文字颜色#999灰色tab.color主题色文字字重RegularMedium这种「透明度颜色字重」的三重区分确保了选中状态的清晰可辨同时保持了整体视觉的协调性。3.3 圆角与阴影的巧妙运用.borderRadius({ topLeft: 16, topRight: 16 }) .shadow({ radius: 8, color: #20000000, offsetY: -2 })borderRadius 对象语法ArkUI 支持为四个角分别设置圆角半径格式为{ topLeft, topRight, bottomLeft, bottomRight }。这里只设定了顶部两个角的圆角底部紧贴屏幕边缘形成悬浮导航栏的效果。阴影向上偏移offsetY: -2表示阴影向上偏移 2vp配合radius: 8较大的模糊半径产生导航栏「浮在内容上方」的视觉效果。这与 Material Design 的 Bottom App Bar 设计语言一致。四、HarmonyOS 特色功能深度解析4.1 layoutWeight 弹性布局.layoutWeight(1)每个 Tab 项都设置layoutWeight(1)在Row容器中等分宽度。无论屏幕宽度是 360vp 还是 428vp四个 Tab 自动平分底部空间。layoutWeight 的计算规则先分配所有未设置layoutWeight的组件的固定宽度剩余空间按layoutWeight值比例分配给设置了该属性的组件如果所有子组件都设置了layoutWeight(1)则等分总宽度4.2 ForEach 的索引参数ForEach(this.tabs, (tab: TabItem, idx: number) { // idx 就是当前项的索引 .onClick(() { this.currentTab idx }) })ForEach的回调函数可以接收两个参数第一个参数数组中的元素值第二个参数元素在数组中的索引从 0 开始使用索引参数可以避免为每个 Tab 手动绑定onClick事件这是 ForEach 简化代码的重要特性。4.3 Text 组件的多行内容content: 欢迎来到底部导航演示\n\n这是首页的内容区域\n可以放置各种信息和功能卡片在Text组件中使用\n换行符可以实现多行文本显示配合lineHeight属性控制行间距。这是最简单的内容换行方式不需要使用多个Text组件堆叠。五、UI/UX 设计分析5.1 四标签导航四个标签覆盖了主流 App 的标准导航结构标签图标主题色典型用途首页#0077FF蓝色内容信息流发现#4CAF50绿色搜索/探索消息#FF9800橙色通知/聊天我的#9C27B0紫色个人中心色彩心理学四种主题色分别代表不同的功能属性——蓝色专业、绿色自然、橙色活跃、紫色创意。5.2 沉浸式导航栏设计底部导航栏的设计借鉴了现代移动操作系统的设计语言悬浮效果白色背景 顶部圆角 向上阴影模拟物理悬浮触控热区padding({ top: 6, bottom: 6 })确保每个 Tab 的点击区域足够大至少 44vp 的触控高度视觉权重图标 22px 文字 11px图标视觉权重更大易于识别5.3 内容区域设计内容区域居中显示大图标和欢迎文字图标fontSize(64)大尺寸图标形成视觉焦点文字lineHeight(28)舒适的阅读行距textAlign(TextAlign.Center)居中排列六、最佳实践与优化建议6.1 当前代码亮点极简状态管理仅用currentTab一个变量完成全部切换逻辑数据驱动 UI所有显示内容来自tabs数组新增标签只需修改数据导航栏悬浮设计圆角 阴影营造沉浸视觉体验Tab 等分布局layoutWeight(1)实现自适应宽度6.2 可优化方向// 优化建议 1页面切换动画 // 使用 transition 添加页面切换动画 Column() .transition({ type: TransitionType.Insert, translate: { x: 100 } }) .transition({ type: TransitionType.Delete, translate: { x: -100 } }) // 优化建议 2使用 Tabs 组件替代手动构建 // HarmonyOS 提供了 Tabs TabContent 原生组件 Tabs() { TabContent() { /* 首页内容 */ }.tabBar( 首页) TabContent() { /* 发现内容 */ }.tabBar( 发现) TabContent() { /* 消息内容 */ }.tabBar( 消息) TabContent() { /* 我的内容 */ }.tabBar( 我的) } .barPosition(BarPosition.End) // 导航栏在底部 // 优化建议 3角标通知 // 在 Tab 图标上显示未读数量 Stack() { Text(tab.icon).fontSize(22) if (unreadCount 0) { Text(unreadCount 99 ? 99 : unreadCount.toString()) .fontSize(10).fontColor(#fff) .backgroundColor(#F44336).borderRadius(8) .padding({ left: 4, right: 4 }).height(16) .align(Alignment.TopEnd) } } // 优化建议 4页面缓存 // 使用 State 保存每个 Tab 的滚动位置 State scrollPositions: number[] [0, 0, 0, 0]; // 优化建议 5导航栏隐藏/显示 // 根据内容滚动方向自动隐藏/显示导航栏 State navBarVisible: boolean true;6.3 性能优化Tab 数量控制底部导航建议不超过 5 个 TabMaterial Design 规范超过时需使用「更多」折叠或滚动模式内容懒加载当前实现中 4 个 Tab 的内容同时存在通过currentTab控制显示对于内容较重的页面应使用懒加载图标性能使用 emoji 而非图片图标减少资源加载开销七、总结与扩展底部导航应用展示了 ArkUI 中实现 Tab 导航的核心模式知识点应用位置重要程度State 状态驱动currentTab 切换★★★★★layoutWeight 弹性布局Tab 等分★★★★★ForEach 索引参数onClick 事件绑定★★★★☆borderRadius 对象语法导航栏圆角★★★☆☆shadow 阴影悬浮效果★★★☆☆扩展思路与 Tabs 组件对比学习 HarmonyOS 原生Tabs组件的 API了解手动构建与原生组件的权衡中间大按钮部分 App 在底部导航栏中间放置大按钮如发帖按钮可通过Stack布局实现导航栏颜色跟随根据所在 Tab 的主题色改变导航栏颜色返回拦截配合onBackPress实现双击退出或确认提示跨页面状态保持使用AppStorage在页面切换时保持 Tab 状态手势切换添加左右滑动手势SwipeGesture切换 Tab底部导航是现代移动应用的标准导航模式。通过这个案例你不仅学会了如何构建底部导航栏更理解了状态驱动的本质——一个数字的变化驱动整个页面的重新渲染。这就是声明式 UI 的核心思想UI 是状态的函数。
