写点什么

鸿蒙 NEXT 开发 -Tabs 组件

作者:东林知识库
  • 2025-03-31
    江苏
  • 本文字数:3125 字

    阅读完需:约 10 分钟

1. 基本介绍

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


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


1.1 说明

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

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

2. 语法

Tabs 使用花括号包裹 TabContent



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

2.1 代码示例

@Entry  @Component  struct TabsPage {
build() { Column(){ Tabs() { TabContent() { Text('首页的内容').fontSize(30) } .tabBar('首页')
TabContent() { Text('推荐的内容').fontSize(30) } .tabBar('推荐')
TabContent() { Text('发现的内容').fontSize(30) } .tabBar('发现')
TabContent() { Text('我的内容').fontSize(30) } .tabBar("我的") } } .height('100%') .width('100%') } }
复制代码

3. 底部导航

底部导航是应用中最常见的一种导航方式。底部导航位于应用一级页面的底部,用户打开应用,能够分清整个应用的功能分类,以及页签对应的内容,并且其位于底部更加方便用户单手操作。底部导航一般作为应用的主导航形式存在,其作用是将用户关心的内容按照功能进行分类,迎合用户使用习惯,方便在不同模块间的内容切换。


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

3.1 代码示例

@Entry  @Component  struct TabsPage {
build() { Column(){ Tabs({barPosition:BarPosition.End}) { TabContent() { Text('首页的内容').fontSize(30) } .tabBar('首页')
TabContent() { Text('推荐的内容').fontSize(30) } .tabBar('推荐')
TabContent() { Text('发现的内容').fontSize(30) } .tabBar('发现')
TabContent() { Text('我的内容').fontSize(30) } .tabBar("我的") } } .height('100%') .width('100%') } }
复制代码

4. 顶部导航

当内容分类较多,用户对不同内容的浏览概率相差不大,需要经常快速切换时,一般采用顶部导航模式进行设计,作为对底部导航内容的进一步划分,常见一些资讯类应用对内容的分类为关注、视频、数码,或者主题应用中对主题进行进一步划分为图片、视频、字体等。

4.1 代码示例

@Entry  @Component  struct TabsPage {
build() { Column(){ Tabs({barPosition:BarPosition.Start}) { TabContent() { Text('首页的内容').fontSize(30) } .tabBar('首页')
TabContent() { Text('推荐的内容').fontSize(30) } .tabBar('推荐')
TabContent() { Text('发现的内容').fontSize(30) } .tabBar('发现')
TabContent() { Text('我的内容').fontSize(30) } .tabBar("我的") } } .height('100%') .width('100%') } }
复制代码

5. 侧边导航

侧边导航是应用较为少见的一种导航模式,更多适用于横屏界面,用于对应用进行导航操作,由于用户的视觉习惯是从左到右,侧边导航栏默认为左侧侧边栏。


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

5.1 代码示例

@Entry  @Component  struct TabsPage {
build() { Column(){ Tabs({barPosition:BarPosition.Start}) { TabContent() { Text('首页的内容').fontSize(30) } .tabBar('首页')
TabContent() { Text('推荐的内容').fontSize(30) } .tabBar('推荐')
TabContent() { Text('发现的内容').fontSize(30) } .tabBar('发现')
TabContent() { Text('我的内容').fontSize(30) } .tabBar("我的") }.vertical(true) .barWidth(100) .barHeight(200) } .height('100%') .width('100%') } }
复制代码

6. 自定义导航栏

对于底部导航栏,一般作为应用主页面功能区分,为了更好的用户体验,会组合文字以及对应语义图标表示页签内容,这种情况下,需要自定义导航页签的样式。


设置自定义导航栏需要使用 tabBar 的参数,以其支持的 CustomBuilder 的方式传入自定义的函数组件样式。例如这里声明 tabBuilder 的自定义函数组件,传入参数包括页签文字 title,对应位置 index,以及选中状态和未选中状态的图片资源。通过当前活跃的 currentIndex 和页签对应的 targetIndex 匹配与否,决定 UI 显示的样式。

6.1 代码示例

TabsPage.ets


@Entry@Componentstruct TabsPage {
@State currentIndex:number=0
@Builder tabBuilder(title: string, targetIndex: number, normalImg: Resource, selectedImg: Resource) { Column() { Image(this.currentIndex === targetIndex ? selectedImg : normalImg) .size({ width: 25, height: 25 }) Text(title) .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B') } .width('100%') .height(50) .justifyContent(FlexAlign.Center) }
build() { Column() { Tabs({ barPosition: BarPosition.End }) { TabContent() { Text('首页的内容').fontSize(30) } .tabBar(this.tabBuilder('首页',0,$r('app.media.index_default'),$r('app.media.index_select')))
TabContent() { Text('推荐的内容').fontSize(30) } .tabBar(this.tabBuilder('推荐',1,$r('app.media.index_default'),$r('app.media.index_select')))
TabContent() { Text('发现的内容').fontSize(30) } .tabBar(this.tabBuilder('发现',2,$r('app.media.index_default'),$r('app.media.index_select')))
TabContent() { Text('我的内容').fontSize(30) } .tabBar(this.tabBuilder('我的',3,$r('app.media.index_default'),$r('app.media.index_select'))) } .onChange((currentIndex: number) => { this.currentIndex = currentIndex }) } .height('100%') .width('100%') }}
复制代码


官方文档地址:文档中心

发布于: 2 小时前阅读数: 8
用户头像

享受当下,享受生活,享受成长乐趣! 2025-02-26 加入

鸿蒙、Java、大数据

评论

发布
暂无评论
鸿蒙NEXT开发-Tabs组件_东林知识库_InfoQ写作社区