ArkUI Tabs选项卡布局组件的用法（附带实例）

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

Tabs 组件的页面由两个部分组成，分别是 TabContent 和 TabBar。TabContent 是内容页，TabBar 是导航页签栏，页面结构如下图所示：


根据不同的导航类型，布局会有区别，通常分为底部导航、顶部导航和侧边导航，导航栏分别位于底部、顶部和侧边。

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

Tabs 使用花括号包裹 TabContent，如下图所示，其中 TabContent 显示相应的内容页。


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

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

设置多个内容时，需要在 Tabs 内按照顺序放置。示例代码如下：

@Entry
@Component
struct TabsSample {
    build() {
        // 标签卡组件
        Tabs() {
            // 选项卡内容组件
            TabContent() {
                // 选项卡内容组件的子组件
                Text('首页的内容').fontSize(30)
            }
            // 设置选项卡内容组件的标签
            .tabBar('首页')

            // 选项卡内容组件
            TabContent() {
                // 选项卡内容组件的子组件
                Text('推荐的内容').fontSize(30)
            }
            // 设置选项卡内容组件的标签
            .tabBar('推荐')

            // 选项卡内容组件
            TabContent() {
                // 选项卡内容组件的子组件
                Text('发现的内容').fontSize(30)
            }
            // 设置选项卡内容组件的标签
            .tabBar('发现')

            // 选项卡内容组件
            TabContent() {
                // 选项卡内容组件的子组件
                Text('我的内容').fontSize(30)
            }
            // 设置选项卡内容组件的标签
            .tabBar("我的")
        }
    }
}

显示效果如下图所示：

Tabs组件底部导航

底部导航是应用中常见的导航方式之一，通常位于应用一级页面的底部。

用户打开应用时，通过底部导航栏可以清晰地识别出应用的功能分类和各页签对应的内容，而且底部的位置也便于用户单手操作。

作为应用的主要导航形式，底部导航通过将用户关心的内容按照功能进行分类，迎合用户的使用习惯，便于用户在不同模块之间进行快速切换。

导航栏位置使用 Tabs 的 barPosition 参数进行设置。默认情况下，导航栏位于顶部，此时，barPosition 为 BarPosition.Start。要设置为底部导航时，需要将 barPosition 设置为 BarPosition.End。

示例代码如下：

@Entry
@Component
struct TabsSample {
    build() {
        // 标签卡组件，设置选项卡组件导航栏的位置为底部
        Tabs({ barPosition: BarPosition.End}) {
            // 选项卡内容组件
            TabContent() {
                // 选项卡内容组件的子组件
                Text('首页的内容').fontSize(30)
            }
            // 设置选项卡内容组件的标签
            .tabBar('首页')

            // 选项卡内容组件
            TabContent() {
                // 选项卡内容组件的子组件
                Text('推荐的内容').fontSize(30)
            }
            // 设置选项卡内容组件的标签
            .tabBar('推荐')

            // 选项卡内容组件
            TabContent() {
                // 选项卡内容组件的子组件
                Text('发现的内容').fontSize(30)
            }
            // 设置选项卡内容组件的标签
            .tabBar('发现')

            // 选项卡内容组件
            TabContent() {
                // 选项卡内容组件的子组件
                Text('我的内容').fontSize(30)
            }
            // 设置选项卡内容组件的标签
            .tabBar("我的")
        }
    }
}

显示效果如下图所示：

Tabs组件顶部导航

当内容分类较多，用户对不同内容的浏览概率相差不大，需要经常快速切换时，一般采用顶部导航模式进行设计，作为对底部导航内容的进一步划分。

例如，在一些资讯类应用中对内容分类为关注、视频、数码，或者在主题应用中对主题进一步划分为图片、视频、字体等。

顶部导航示例代码如下：

@Entry
@Component
struct TabsSample {
    build() {
        // 标签卡组件，设置选项卡组件导航栏的位置为顶部（默认情况）
        Tabs({ barPosition: BarPosition.Start }) {
            TabContent() {
                Text('关注的内容').fontSize(40)
            }.tabBar('关注').backgroundColor(Color.Yellow)
            TabContent() {
                Text('视频的内容').fontSize(40)
            }.tabBar('视频').backgroundColor('#ff90f0')
            TabContent() {
                Text('游戏的内容').fontSize(40)
            }.tabBar('游戏').backgroundColor(Color.Orange)
            TabContent() {
                Text('数码的内容').fontSize(40)
            }.tabBar('数码').backgroundColor(Color.Pink)
            TabContent() {
                Text('体育的内容').fontSize(40)
            }.tabBar('体育').backgroundColor('#00ff99')
            TabContent() {
                Text('科技的内容').fontSize(40)
            }.tabBar('科技').backgroundColor('#99ff00')
            TabContent() {
                Text('影视的内容').fontSize(40)
            }.tabBar('影视').backgroundColor('#f0ff99')
        }
    }
}

显示效果如下图所示：

Tabs组件侧边导航

侧边导航是使用较少的一种导航模式，更多适用于横屏界面。由于用户的视觉习惯是从左到右的，侧边导航栏默认为左侧侧边栏，如下图所示。


实现侧边导航栏需要将 Tabs 的 vertical 属性设置为 true。vertical 的默认值为 false，表明内容页和导航栏垂直方向排列。

实现侧边导航的示例代码如下：

@Entry
@Component
struct TabsSample {
    build() {
        // 标签卡组件，设置选项卡组件导航栏的位置为顶部（默认情况）
        Tabs({ barPosition: BarPosition.Start }) {
            TabContent() {
                Text('关注的内容').fontSize(40)
            }.tabBar('关注').backgroundColor(Color.Yellow)
            TabContent() {
                Text('视频的内容').fontSize(40)
            }.tabBar('视频').backgroundColor('#ff90f0')
            TabContent() {
                Text('游戏的内容').fontSize(40)
            }.tabBar('游戏').backgroundColor(Color.Orange)
            TabContent() {
                Text('数码的内容').fontSize(40)
            }.tabBar('数码').backgroundColor(Color.Pink)
        }
        // 设置垂直显示导航栏，设置导航栏的宽度为100vp，高度为200vp
        .vertical(true).barWidth(100).barHeight(200)
    }
}

• vertical 为 false 时，tabbar 的宽度默认为撑满屏幕的宽度，需要设置 barWidth 为合适值。
• vertical 为 true 时，tabbar 的高度默认为实际内容的高度，需要设置 barHeight 为合适值。

显示效果如下图所示：