鸿蒙HarmonyOS实战-ArkUI组件（Tabs）

 一、Tabs

Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。每个选项卡通常包罗一个面板和一个标签，用户可以通过点击标签来切换面板。Tabs组件通常用于展示多个相干但又不需要同时展示的数据聚集或功能聚集，以提高页面的可维护性和可用性。
Tabs组件的重要功能包罗：

• 切换选项卡：用户可以通过点击标签来切换显示面板。
  
• 激活状态：当前选中的标签会出现激活状态，以便用户清楚地知道他们当前所在的选项卡。
  
• 自定义选项卡内容：用户可以通过自定义选项卡内容（例如图片、文本、图标等）来增强页面的可读性和可用性。
  
• 加载延迟：假如页面需要加载大量数据或内容，Tabs组件可以通过延迟加载未激活的面板来提升页面性能。
  

1.基本布局

Tabs使用花括号包裹TabContent，每一个TabContent对应一个tabBar

1. @Entry
2. @Component
3. struct NavigationExample {
4.   private arr: number[] = [1, 2, 3];
6.   build() {
7.     Column() {
8.       Tabs() {
9.         TabContent() {
10.           Text('首页的内容').fontSize(30)
11.         }
12.         .tabBar('首页')
14.         TabContent() {
15.           Text('推荐的内容').fontSize(30)
16.         }
17.         .tabBar('推荐')
19.         TabContent() {
20.           Text('发现的内容').fontSize(30)
21.         }
22.         .tabBar('发现')
24.         TabContent() {
25.           Text('我的内容').fontSize(30)
26.         }
27.         .tabBar("我的")
28.       }
29.     }
30.     .height('100%')
31.     .width('100%')
32.     .backgroundColor('#F1F3F5')
33.   }
34. }

复制代码

2.导航位置