【ArkUI】使用选项卡 Tabs 构建页签

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

一、基本布局

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

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

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

• Tabs 使用花括号包裹 TabContent，TabContent 显示相应的内容页。

• 每一个 TabContent 对应的内容需要有一个页签，可以通过 TabContent 的 tabBar 属性进行配置，tabBar 显示对应页签中的内容。

• 设置多个内容时，需在 Tabs 内按照顺序放置。

Tabs() {
   
   
  TabContent() {
   
   
    Text('首页的内容')
      .fontSize(30)
  }
  .tabBar('首页')

  TabContent() {
   
   
    Text('推荐的内容')
      .fontSize(30)
  }
  .tabBar('推荐')

  TabContent() {
   
   
    Text('发现的内容')
      .fontSize(30)
  }
  .tabBar('发现')

  TabContent() {
   
   
    Text('我的内容')
      .fontSize(30)
  }
  .tabBar('我的')
}

二、Tabs接口及属性

1、接口说明

Tabs({barPosition?: BarPosition，index?: number， controller?: TabsController， barModifier?: CommonModifier })

• barPosition：设置Tabs的页签位置。默认值：BarPosition.Start。
• index：设置当前显示页签的索引。默认值：0
• controller：设置Tabs控制器。用于控制 Tabs 组件进行页签切换。
• barModifier：设置TabBar的通用属性。

2、属性说明