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

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，必要对页面内容进行分类，进步页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。
  通过ArkUI来实现应用中常见的导航效果——底部导航，我们是通过Tabs来实现，并且会使用自定义导航栏的情势来构建。
官方文档：文档中心-Tabs导航组件
基本布局

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

说明

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

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

1. TabContent() {
2.    Text('首页的内容').fontSize(30)
3. }
4. .tabBar('首页')

复制代码

图2 Tabs与TabContent使用

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

1. Tabs() {
2.   TabContent() {
3.     Text('首页的内容').fontSize(30)
4.   }
5.   .tabBar('首页')
7.   TabContent() {
8.     Text('推荐的内容').fontSize(30)
9.   }
10.   .tabBar('推荐')
12.   TabContent() {
13.     Text('发现的内容').fontSize(30)
14.   }
15.   .tabBar('发现')
16.   
17.   TabContent() {
18.     Text('我的内容').fontSize(30)
19.   }
20.   .tabBar("我的")
21. }

复制代码

 底部导航


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

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

1. Tabs({ barPosition: BarPosition.End }) {
2.   // TabContent的内容：首页、发现、推荐、我的
3.   ...
4. }

复制代码

完整代码

每一个TabContent对应的内容必要有一个页签，可以通过TabContent的tabBar属性进行配置。
新建一个变量currentIndex，用来表示当前页签的索引 。
新建一个变量TabsController，它是Tabs组件的控制器，用于控制Tabs组件进行页签切换。
借助Builder装饰器的方式来实现，参数这里我们定义四个参数：标题title、当前索引targetIndex、选中状态时的图片资源selectedImg、未选中状态时的图片资源normalImg。
关于Builder装饰器的内容可以参考以下文档：@Builder装饰器：自定义构建函数
样式上我们使用线性布局Column来实现上图下文的样式，点击事件通过控制器来实现页签的切换，终极自定义标题栏我们可以实现为以下情势：

1. // 自定义导航页签的样式
2.   @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
3.     Column() {
4.       Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
5.         .size({ width: 25, height: 25 })
6.       Text(title)
7.         .fontColor(this.currentIndex === targetIndex ? '#28bff1' : '#8a8a8a')
8.     }
9.     .width('100%')
10.     .height(50)
11.     .justifyContent(FlexAlign.Center)
12.     .onClick(() => {
13.       this.currentIndex = targetIndex
14.       this.controller.changeIndex(this.currentIndex)
15.     })
16.   }

复制代码

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

1. @Entry@Componentstruct Index {  @State currentIndex: number = 0  private controller: TabsController = new TabsController()   // 自定义导航页签的样式
2.   @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
3.     Column() {
4.       Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
5.         .size({ width: 25, height: 25 })
6.       Text(title)
7.         .fontColor(this.currentIndex === targetIndex ? '#28bff1' : '#8a8a8a')
8.     }
9.     .width('100%')
10.     .height(50)
11.     .justifyContent(FlexAlign.Center)
12.     .onClick(() => {
13.       this.currentIndex = targetIndex
14.       this.controller.changeIndex(this.currentIndex)
15.     })
16.   }   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，即顶部导航模式。

1. Tabs({ barPosition: BarPosition.Start }) {
2.   // TabContent的内容:关注、视频、游戏、数码、科技、体育、影视
3.   ...
4. }

复制代码

侧边导航

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

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

1. Tabs({ barPosition: BarPosition.Start }) {
2.   // TabContent的内容:首页、发现、推荐、我的
3.   ...
4. }
5. .vertical(true)
6. .barWidth(100)
7. .barHeight(200)

复制代码

自定义导航栏


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

系统默认情况下采用了下划线标志当前活跃的页签，而自定义导航栏必要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。
设置自定义导航栏必要使用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。比方这里声明TabBuilder的自定义函数组件，传入参数包罗页签笔墨title，对应位置index，以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否，决定UI显示的样式。

1. @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
2.   Column() {
3.     Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
4.       .size({ width: 25, height: 25 })
5.     Text(title)
6.       .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
7.   }
8.   .width('100%')
9.   .height(50)
10.   .justifyContent(FlexAlign.Center)
11. }

复制代码

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

1. TabContent() {
2.   Column(){
3.     Text('我的内容')  
4.   }
5.   .width('100%')
6.   .height('100%')
7.   .backgroundColor('#007DFF')
8. }
9. .tabBar(this.TabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))

复制代码

切换至指定页签


在不使用自定义导航栏时，系统默认的Tabs会实现切换逻辑。在使用了自定义导航栏后，切换页签的逻辑必要手动实现。即用户点击对应页签时，屏幕必要显示相应的内容页。
切换指定页签必要使用TabsController，TabsController是Tabs组件的控制器，用于控制Tabs组件进行页签切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。

1. private tabsController : TabsController = new TabsController()
2. @State currentIndex:number = 0;
4. @Builder TabBuilder(title: string, targetIndex: number) {
5.   Column() {
6.     Text(title)
7.       .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
8.   }
9.   ...
10.   .onClick(() => {
11.     this.currentIndex = targetIndex;
12.     this.tabsController.changeIndex(this.currentIndex);
13.   })
14. }

复制代码

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

1. Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
2.   TabContent(){
3.     ...
4.   }.tabBar(this.TabBuilder('首页',0))
6.   TabContent(){
7.     ...
8.   }.tabBar(this.TabBuilder('发现',1))
10.   TabContent(){
11.     ...
12.   }.tabBar(this.TabBuilder('推荐',2))
14.   TabContent(){
15.     ...
16.   }
17.   .tabBar(this.TabBuilder('我的',3))
18. }

复制代码

滑动切换导航栏


在不使用自定义导航栏的情况下，Tabs默认会实现tabBar与TabContent的切换联动。但在使用了自定义导航栏后，使用TabsController可以实现点击页签与页面内容的联动，但不能实现滑动页面时，页面内容对应页签的联动。即用户在使用滑动屏幕切换页面内容时，页签栏必要同步切换至内容对应的页签。
此时必要使用Tabs提供的onChange事件方法，监听索引index的变化，并将其当前活跃的index值传递给currentIndex，实现页签内容的切换。

1. Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
2.   TabContent() {
3.     ...
4.   }.tabBar(this.TabBuilder('首页', 0))
6.   TabContent() {
7.     ...
8.   }.tabBar(this.TabBuilder('发现', 1))
10.   TabContent() {
11.     ...
12.   }.tabBar(this.TabBuilder('推荐', 2))
14.   TabContent() {
15.     ...
16.   }
17.   .tabBar(this.TabBuilder('我的', 3))
18. }.onChange((index) => {
19.   this.currentIndex = index
20. })

复制代码

写在最后

• 如果你以为这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  
• 点赞，转发，有你们的 『点赞和批评』，才是我创造的动力。
  
• 关注博主，同时可以等候后续文章ing