鸿蒙原生APP开发之常见导航样式案例开发实践

最新推荐文章于 2025-03-22 10:06:24 发布

CTrup

最新推荐文章于 2025-03-22 10:06:24 发布

阅读量1k

点赞数 13

分类专栏：鸿蒙开发 HarmonyOS 移动开发文章标签： harmonyos 移动开发鸿蒙开发 ArkUI 界面布局

本文链接：https://blog.csdn.net/CTrup/article/details/143406674

版权

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

概述

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

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

图1 底部导航效果示意图

图2 顶部导航效果示意图

图3 侧边导航效果示意图

底部导航

基础底部导航

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

使用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;
  })
}

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))
}

导航布局代码如下所示：

// 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);
  })
}