鸿蒙HarmonyOS （开发进阶）常见导航样式案例开发实践

鸿蒙NEXT开发实战往期必看文章：

一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！

“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

HarmonyOS NEXT应用开发案例实践总结合（持续更新......）

HarmonyOS NEXT应用开发性能优化实践总结（持续更新......）

---

概述

不同的页签导航在基本功能上，会因产品形态的不同衍生出不同样式的UI效果。本文为满足开发者对于不同导航样式的需求，介绍了多种导航的实现。

本文基于常见应用的页签导航效果，给出对应的实现方案。不同页签导航效果如下图所示。

图1 底部导航效果示意图

图2 顶部导航效果示意图

图3 侧边导航效果示意图

底部导航

基础底部导航

基础底部导航属于常规导航，一般以图标加文字的形式展示。

1. 使用Tabs组件，设置barPosition为BarPosition.End控制导航条底部展示。Tabs组件嵌套tabContentBuilder自定义组件。

   // entry/src/main/ets/pages/BottomTab.ets
   build() {
     Tabs({
       barPosition: BarPosition.End,
       controller: this.tabsController
     }) {
       this.tabContentBuilder($r('app.string.message'),
         Constants.TAB_INDEX_ZERO, $r('app.media.activeMessage'), $r('app.media.message'))
       this.tabContentBuilder($r('app.string.people'),
         Constants.TAB_INDEX_ONE, $r('app.media.activePeople'), $r('app.media.people'))
       this.tabContentBuilder($r('app.string.activity'),
         Constants.TAB_INDEX_TWO, $r('app.media.activeStar'), $r('app.media.star'))
     }
     .width('100%')
     .backgroundColor('#F3F4F5')
     .barHeight(52)
     .barMode(BarMode.Fixed)
     .onAnimationStart((index: number, targetIndex: number) => {
       hilog.info(0x0000, 'index', index.toString());
       this.currentIndex = targetIndex;
     })
   }

2. tabContentBuilder自定义组件嵌套TabContent组件实现内容区，并设置tabBar属性实现导航条。

   // entry/src/main/ets/pages/BottomTab.ets
   @Builder
   tabContentBuilder(text: Resource, index: number, selectedImg: Resource, normalImg: Resource) {
     TabContent() {
       Row() {
         Text(text)
           .height(300)
           .fontSize(30)
       }
       .width('100%')
       .justifyContent(FlexAlign.Center)
     }
     .padding({ left: 12, right: 12 })
     .backgroundColor(Color.White)
     .tabBar(this.tabBuilder(text, index, selectedImg, normalImg))
   }

3. 导航布局代码如下所示：

   // entry/src/main/ets/pages/BottomTab.ets
   @Builder
   tabBuilder(title: Resource, index: number, selectedImg: Resource, normalImg: Resource) {
     Column() {
       Image(this.currentIndex === index ? selectedImg : normalImg)
         .width(24)
         .height(24)
         .objectFit(ImageFit.Contain)
       Text(title)
         .margin({ top: 4 })
         .fontSize(10)
         .fontColor(this.currentIndex === index ? '#3388ff' : '#E6000000')
     }
     .justifyContent(FlexAlign.Center)
     .height(52)
     .width('100%')
     .onClick(() => {
       this.currentIndex = index;
       this.tabsController.changeIndex(this.currentIndex);
     })
   }