HarmonyOS ArkUI --- Tabs组件的使用

概述

在我们常用的应用中，经常会有视图内容切换的场景，来展示更加丰富的内容。比如下面这个页面，点击底部的页签的选项，可以实现“首页”和“我的”

两个内容视图的切换。

ArkUI开发框架提供了一种页签容器组件Tabs，开发者通过Tabs组件可以很容易的实现内容视图的切换。页签容器Tabs的形式多种多样，不同的页面设计页签不一样，可以把页签设置在底部、顶部或者侧边。

本文将详细介绍Tabs组件的使用。

Tabs组件的简单使用

Tabs组件仅可包含子组件TabContent，每一个页签对应一个内容视图即TabContent组件。下面的示例代码构建了一个简单的页签页面：

1. @Entry
2. @Component
3. struct TabsExample {
4. private controller: TabsController = new TabsController()
6. build() {
7. Column() {
8. Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
9. TabContent() {
10. Column().width('100%').height('100%').backgroundColor(Color.Green)
11. }
12. .tabBar('green')
14. TabContent() {
15. Column().width('100%').height('100%').backgroundColor(Color.Blue)
16. }
17. .tabBar('blue')
19. TabContent() {
20. Column().width('100%').height('100%').backgroundColor(Color.Yellow)
21. }
22. .tabBar('yellow')
24. TabContent() {
25. Column().width('100%').height('100%').backgroundColor(Color.Pink)
26. }
27. .tabBar('pink')
28. }
29. .barWidth('100%') // 设置TabBar宽度
30. .barHeight(60) // 设置TabBar高度
31. .width('100%') // 设置Tabs组件宽度
32. .height('100%') // 设置Tabs组件高度
33. .backgroundColor(0xF5F5F5) // 设置Tabs组件背景颜色
34. }
35. .width('100%')
36. .height('100%')
37. }
38. }

效果图如下：

上面示例代码中，Tabs组件中包含4个子组件TabContent，通过TabContent的tabBar属性设置TabBar的显示内容。使用通用属性width和height设置了Tabs组件的宽高，使用barWidth和barHeight设置了TabBar的宽度和高度。

说明

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

设置TabBar布局模式

因为Tabs的布局模式默认是Fixed的，所以Tabs的页签是不可滑动的。当页签比较多的时候，可能会导致页签显示不全，将布局模式设置为Scrollable的话，可以实现页签的滚动。

Tabs的布局模式有Fixed（默认）和Scrollable两种：

• BarMode.Fixed：所有TabBar平均分配barWidth宽度（纵向时平均分配barHeight高度）,页签不可滚动，效果图如下：

  

• BarMode.Scrollable：每一个TabBar均使用实际布局宽度，超过总长度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。

  

• 当页签比较多的时候，可以滑动页签，下面的示例代码将barMode设置为BarMode.Scrollable，实现了可滚动的页签：

1. @Entry
2. @Component
3. struct TabsExample {
4. private controller: TabsController = new TabsController()
6. build() {
7. Column() {
8. Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
9. TabContent() {
10. Column()
11. .width('100%')
12. .height('100%')
13. .backgroundColor(Color.Green)
14. }
15. .tabBar('green')
17. TabContent() {
18. Column()
19. .width('100%')
20. .height('100%')
21. .backgroundColor(Color.Blue)
22. }
23. .tabBar('blue')
25. ...
27. }
28. .barMode(BarMode.Scrollable)
29. .barWidth('100%')
30. .barHeight(60)
31. .width('100%')
32. .height('100%')
33. }
34. }
35. }

设置TabBar位置和排列方向

Tabs组件页签默认显示在顶部，某些场景下您可能希望Tabs页签出现在底部或者侧边，您可以使用Tabs组件接口中的参数barPosition设置页签位置。此外页签显示位置还与vertical属性相关联，vertical属性用于设置页签的排列方向，当vertical的属性值为false（默认值）时页签横向排列，为true时页签纵向排列。

barPosition的值可以设置为BarPosition.Start（默认值）和BarPosition.End：

• BarPosition.Startvertical属性方法设置为false（默认值）时，页签位于容器顶部。
  1. Tabs({ barPosition: BarPosition.Start }) {
  2. ...
  3. }
  4. .vertical(false)
  5. .barWidth('100%')
  6. .barHeight(60)

  效果图如下：

  

  vertical属性方法设置为true时，页签位于容器左侧。

  1. Tabs({ barPosition: BarPosition.Start }) {
  2. ...
  3. }
  4. .vertical(true)
  5. .barWidth(100)
  6. .barHeight(200)

  效果图如下：

  

• BarPosition.End

  vertical属性方法设置为false时，页签位于容器底部。

  1. Tabs({ barPosition: BarPosition.End }) {
  2. ...
  3. }
  4. .vertical(false)
  5. .barWidth('100%')
  6. .barHeight(60)

  效果图如下：

  

  vertical属性方法设置为true时，页签位于容器右侧。

  1. Tabs({ barPosition: BarPosition.End}) {
  2. ...
  3. }
  4. .vertical(true)
  5. .barWidth(100)
  6. .barHeight(200)

  效果图如下：

  

自定义TabBar样式

TabBar的默认显示效果如下所示：

往往开发过程中，UX给我们的设计效果可能并不是这样的，比如下面的这种底部页签效果：

TabContent的tabBar属性除了支持string类型，还支持使用@Builder装饰器修饰的函数。您可以使用@Builder装饰器，构造一个生成自定义TabBar样式的函数，实现上面的底部页签效果，示例代码如下：

1. @Entry
2. @Component
3. struct TabsExample {
4. @State currentIndex: number = 0;
5. private tabsController: TabsController = new TabsController();
7. @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
8. Column() {
9. Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
10. .size({ width: 25, height: 25 })
11. Text(title)
12. .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
13. }
14. .width('100%')
15. .height(50)
16. .justifyContent(FlexAlign.Center)
17. .onClick(() => {
18. this.currentIndex = targetIndex;
19. this.tabsController.changeIndex(this.currentIndex);
20. })
21. }
23. build() {
24. Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
25. TabContent() {
26. Column().width('100%').height('100%').backgroundColor('#00CB87')
27. }
28. .tabBar(this.TabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))
30. TabContent() {
31. Column().width('100%').height('100%').backgroundColor('#007DFF')
32. }
33. .tabBar(this.TabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))
34. }
35. .barWidth('100%')
36. .barHeight(50)
37. .onChange((index: number) => {
38. this.currentIndex = index;
39. })
40. }
41. }

示例代码中将barPosition的值设置为BarPosition.End，使页签显示在底部。使用@Builder修饰TabBuilder函数，生成由Image和Text组成的页签。同时也给Tabs组件设置了TabsController控制器，当点击某个页签时，调用changeIndex方法进行页签内容切换。

最后还需要给Tabs添加onChange事件，Tab页签切换后触发该事件，这样当我们左右滑动内容视图的时候，页签样式也会跟着改变。