HarmonyOS Next开发学习手册——选项卡 (Tabs)

当页面信息较多时，为了让用户可以大概聚焦于当前体现的内容，必要对页面内容举行分类，进步页面空间利用率。 Tabs 组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的服从，另一方面精简用户单次获取到的信息量。
根本结构

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

   阐明
  

  

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

Tabs利用花括号包裹TabContent，如图2，此中TabContent体现相应的内容页。
图2 Tabs与TabContent利用

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

1. TabContent() {
2.    Text('首页的内容').fontSize(30)
3. }
4. .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参数举行设置。默认环境下，导航栏位于顶部，此时，barPosition为BarPosition.Start。设置为底部导航时，必要将barPosition设置为BarPosition.End。

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

复制代码

顶部导航

当内容分类较多，用户对差别内容的欣赏概率相差不大，必要常常快速切换时，一样平常采取顶部导航模式举行筹划，作为对底部导航内容的进一步分别，常见一些资讯类应用对内容的分类为关注、视频、数码，大概主题应用中对主题举行进一步分别为图片、视频、字体等。
图4 顶部导航栏

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

复制代码

侧边导航

侧边导航是应用较为少见的一种导航模式，更多实用于横屏界面，用于对应用举行导航操纵，由于用户的视觉风俗是从左到右，侧边导航栏默以为左侧侧边栏。
图5 侧边导航栏


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金