HarmonyOS 鸿蒙应用开发( 五、快速实现ArkUI页面底部导航Tabs)

特立独行的猫a2024-01-26 10:57

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

通过ArkUI来实现应用中常见的导航效果------底部导航，我们是通过Tabs来实现，并且会使用自定义导航栏的形式来构建。

官方文档：文档中心-Tabs导航组件

基本布局

Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。

图1Tabs组件布局示意图

说明

  • TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
  • TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。

Tabs使用花括号包裹TabContent，如图2，其中TabContent显示相应的内容页。

javascript 复制代码 
 TabContent() {
   Text('首页的内容').fontSize(30)
 }
.tabBar('首页')

图2Tabs与TabContent使用

每一个TabContent对应的内容需要有一个页签，可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置属性tabBar，可以设置其对应页签中的内容，tabBar作为内容的页签。

设置多个内容时，需在Tabs内按照顺序放置。

javascript 复制代码 
Tabs() {
  TabContent() {
    Text('首页的内容').fontSize(30)
  }
  .tabBar('首页')

  TabContent() {
    Text('推荐的内容').fontSize(30)
  }
  .tabBar('推荐')

  TabContent() {
    Text('发现的内容').fontSize(30)
  }
  .tabBar('发现')
  
  TabContent() {
    Text('我的内容').fontSize(30)
  }
  .tabBar("我的")
}

底部导航

底部导航是应用中最常见的一种导航方式。底部导航位于应用一级页面的底部，用户打开应用，能够分清整个应用的功能分类，以及页签对应的内容，并且其位于底部更加方便用户单手操作。底部导航一般作为应用的主导航形式存在，其作用是将用户关心的内容按照功能进行分类，迎合用户使用习惯，方便在不同模块间的内容切换。

图3底部导航栏

导航栏位置使用Tabs的参数barPosition进行设置，默认情况下，导航栏位于顶部，参数默认值为Start。设置为底部导航需要在Tabs传递参数，设置barPosition为End。

javascript 复制代码 
Tabs({ barPosition: BarPosition.End }) {
  // TabContent的内容：首页、发现、推荐、我的
  ...
}

完整代码

每一个TabContent对应的内容需要有一个页签，可以通过TabContent的tabBar属性进行配置。

新建一个变量currentIndex，用来表示当前页签的索引 。

新建一个变量TabsController，它是Tabs组件的控制器，用于控制Tabs组件进行页签切换。

借助Builder装饰器的方式来实现，参数这里我们定义四个参数：标题title、当前索引targetIndex、选中状态时的图片资源selectedImg、未选中状态时的图片资源normalImg。

关于Builder装饰器的内容可以参考以下文档：@Builder装饰器：自定义构建函数

样式上我们使用线性布局Column来实现上图下文的样式，点击事件通过控制器来实现页签的切换，最终自定义标题栏我们可以实现为以下形式：

javascript 复制代码 
// 自定义导航页签的样式
  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#28bff1' : '#8a8a8a')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex
      this.controller.changeIndex(this.currentIndex)
    })
  }

自定义标题栏实现完成之后，我们就可以在Tabs组件中进行调用了。

完整代码：

javascript 复制代码 
@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
 
  // 自定义导航页签的样式
  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#28bff1' : '#8a8a8a')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex
      this.controller.changeIndex(this.currentIndex)
    })
  }
 
  build() {
    Column() {
      Tabs({
        barPosition: BarPosition.End,
        controller: this.controller
      }) {
        TabContent() {
          Column() {
            // 标题栏
            Text("首页")
              .size({ width: '100%', height: 50 })
              .backgroundColor("#28bff1")
              .fontColor("#ffffff")
              .textAlign(TextAlign.Center)
              .fontSize("18fp")
            // 内容项
            Text("首页").width('100%').height('100%').textAlign(TextAlign.Center).fontSize("25fp")
          }.size({ width: '100%', height: '100%' })
        }.tabBar(this.TabBuilder('首页', 0, $r('app.media.icon_indexed'), $r('app.media.icon_index')))
 
        TabContent() {
          Column() {
            // 标题栏
            Text("列表")
              .size({ width: '100%', height: 50 })
              .backgroundColor("#28bff1")
              .fontColor("#ffffff")
              .textAlign(TextAlign.Center)
              .fontSize("18fp")
            Text("列表").width('100%').height('100%').textAlign(TextAlign.Center).fontSize("25fp")
          }.size({ width: '100%', height: '100%' })
        }.tabBar(this.TabBuilder('列表', 1, $r('app.media.icon_listed'), $r('app.media.icon_list')))
 
        TabContent() {
          Column() {
            // 标题栏
            Text("更多")
              .size({ width: '100%', height: 50 })
              .backgroundColor("#28bff1")
              .fontColor("#ffffff")
              .textAlign(TextAlign.Center)
              .fontSize("18fp")
            Text("更多").width('100%').height('100%').textAlign(TextAlign.Center).fontSize("25fp")
          }.size({ width: '100%', height: '100%' })
        }.tabBar(this.TabBuilder('更多', 2, $r('app.media.icon_othered'), $r('app.media.icon_other')))
      }.scrollable(false) // 禁止滑动切换
    }
    .width('100%')
    .height('100%')
  }
}

顶部导航

当内容分类较多，用户对不同内容的浏览概率相差不大，需要经常快速切换时，一般采用顶部导航模式进行设计，作为对底部导航内容的进一步划分，常见一些资讯类应用对内容的分类为关注、视频、数码，或者手机的主题应用中对主题进行进一步划分为图片、视频、字体等。

图4顶部导航栏

Tabs组件默认的barPosition参数为Start，即顶部导航模式。

javascript 复制代码 
Tabs({ barPosition: BarPosition.Start }) {
  // TabContent的内容:关注、视频、游戏、数码、科技、体育、影视
  ...
}

侧边导航

侧边导航是手机应用较为少见的一种导航模式，更多适用于平板横屏界面，用于对应用进行导航操作，由于用户的视觉习惯是从左到右，侧边导航栏默认为左侧侧边栏。

图5侧边导航栏

实现侧边导航栏需要设置Tabs的属性vertical为true。在底部导航和顶部导航实现中，其默认值为false，表明内容页和导航栏垂直方向排列。

javascript 复制代码 
Tabs({ barPosition: BarPosition.Start }) {
  // TabContent的内容:首页、发现、推荐、我的
  ...
}
.vertical(true)
.barWidth(100)
.barHeight(200)

自定义导航栏

对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。

图9自定义导航栏图

系统默认情况下采用了下划线标志当前活跃的页签，而自定义导航栏需要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。

设置自定义导航栏需要使用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。例如这里声明TabBuilder的自定义函数组件，传入参数包括页签文字title，对应位置index，以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否，决定UI显示的样式。

javascript 复制代码 
@Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
  Column() {
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
      .size({ width: 25, height: 25 })
    Text(title)
      .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
  }
  .width('100%')
  .height(50)
  .justifyContent(FlexAlign.Center)
}

在TabContent对应tabBar属性中传入自定义函数组件，并传递相应的参数。

javascript 复制代码 
TabContent() {
  Column(){
    Text('我的内容')  
  }
  .width('100%')
  .height('100%')
  .backgroundColor('#007DFF')
}
.tabBar(this.TabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))

切换至指定页签

在不使用自定义导航栏时，系统默认的Tabs会实现切换逻辑。在使用了自定义导航栏后，切换页签的逻辑需要手动实现。即用户点击对应页签时，屏幕需要显示相应的内容页。

切换指定页签需要使用TabsController，TabsController是Tabs组件的控制器，用于控制Tabs组件进行页签切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。

javascript 复制代码 
private tabsController : TabsController = new TabsController()
@State currentIndex:number = 0;

@Builder TabBuilder(title: string, targetIndex: number) {
  Column() {
    Text(title)
      .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
  }
  ...
  .onClick(() => {
    this.currentIndex = targetIndex;
    this.tabsController.changeIndex(this.currentIndex);
  })
}

使用自定义导航栏时，在tabBar属性中传入对应的@Builder，并传入相应的参数。

javascript 复制代码 
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
  TabContent(){
    ...
  }.tabBar(this.TabBuilder('首页',0))

  TabContent(){
    ...
  }.tabBar(this.TabBuilder('发现',1))

  TabContent(){
    ...
  }.tabBar(this.TabBuilder('推荐',2))

  TabContent(){
    ...
  }
  .tabBar(this.TabBuilder('我的',3))
}

滑动切换导航栏

在不使用自定义导航栏的情况下，Tabs默认会实现tabBar与TabContent的切换联动。但在使用了自定义导航栏后，使用TabsController可以实现点击页签与页面内容的联动，但不能实现滑动页面时，页面内容对应页签的联动。即用户在使用滑动屏幕切换页面内容时，页签栏需要同步切换至内容对应的页签。

此时需要使用Tabs提供的onChange事件方法，监听索引index的变化，并将其当前活跃的index值传递给currentIndex，实现页签内容的切换。

javascript 复制代码 
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
  TabContent() {
    ...
  }.tabBar(this.TabBuilder('首页', 0))

  TabContent() {
    ...
  }.tabBar(this.TabBuilder('发现', 1))

  TabContent() {
    ...
  }.tabBar(this.TabBuilder('推荐', 2))

  TabContent() {
    ...
  }
  .tabBar(this.TabBuilder('我的', 3))
}.onChange((index) => {
  this.currentIndex = index
})

其他资源

https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-container-tabs-0000001478181433-V3

文档中心--@Builder装饰器：自定义构建函数

【HarmonyOS】初识ArkUI------快速实现页面导航之Tabs_鸿蒙 ark 底部导航栏-CSDN博客

相关推荐
Asort1 分钟前
JavaScript 从零开始（六）：控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney20 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥？（功能篇）
前端·后端·nestjs
在云端易逍遥22 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare23 分钟前
选择文件夹路径
前端
艾小码23 分钟前
还在被超长列表卡到崩溃？3招搞定虚拟滚动，性能直接起飞！
前端·javascript·react.js
闰五月24 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁28 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅28 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸29 分钟前
Prompt结构化输出：从入门到精通的系统指南
前端
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南03Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用04UV安装并设置国内源0546个Nano-banana 精选提示词，持续更新中06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程08Spec-Kit 使用指南09智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践10解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题