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. .bac