当前位置：首页 > news >正文

鸿蒙应用的Tabs 组件怎么使用

news 2025/7/12 12:53:13

鸿蒙应用中的Tabs组件是一个用于通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。以下是Tabs组件的使用方法：

一、基本结构

Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏。Tabs组件使用花括号包裹TabContent，其中TabContent显示相应的内容页。

二、常用属性

barPosition：用于设置导航栏的位置，可以是开头（BarPosition.Start）或结尾（BarPosition.End）。默认情况下，导航栏位于顶部（BarPosition.Start）。当vertical属性为true时，barPosition设置为start，则导航栏位于左侧；设置为end，则导航栏位于右侧。
vertical：用于设置导航栏的方向，可以是水平（false）或垂直（true）。
scrollable：控制是否允许滑动。当导航栏的内容过多，无法在一屏内显示完时，可以通过设置scrollable为true来允许滑动。
animationDuration：设置切换动画的时间，单位为毫秒。
barMode：设置导航栏的模式，可以是固定（BarMode.Fixed）或滚动（BarMode.Scrollable）。当标签页过多时，可通过barMode属性设置导航栏的滑动。

三、使用方法

基本用法

在鸿蒙应用的页面中，可以通过以下方式使用Tabs组件：

@Entry
@Component
struct TabsDemo {build() {Tabs() {TabContent() {Text('首页内容')}.tabBar('首页')TabContent() {Text('推荐内容')}.tabBar('推荐')TabContent() {Text('发现内容')}.tabBar('发现')TabContent() {Text('我的内容')}.tabBar('我的')}}
}

设置导航栏位置

可以通过barPosition属性设置导航栏的位置。例如，将导航栏设置在底部：

Tabs({barPosition: BarPosition.End}) {// ...TabContent和tabBar的内容
}

滚动导航栏

当标签页过多，无法在一屏内显示完时，可以通过设置barMode为BarMode.Scrollable来实现滚动导航栏：

Tabs() {ForEach(this.titles, (item: string, index: number) => {TabContent() {Text(`${item}内容`)}.tabBar(`${item}`)})
}.barMode(BarMode.Scrollable)

其中，this.titles是一个包含所有标签页标题的字符串数组。

自定义导航栏

TabBar在底部时，一般会显示图形和文字，甚至有特殊的图标。可以通过自定义构建函数来实现自定义导航栏：

@Builder
myBuildBar(index: number, title: string, img?: ResourceStr, selectImg?: ResourceStr) {Column() {Image(index == this.selectedIndex ? selectImg : img).width(30).fillColor(Color.Orange)if (index === this.selectedIndex) {Text(title).fontColor(Color.Orange)} else {Text(title)}}
}@Entry
@Component
struct CustomTabsDemo {@State selectedIndex: number = 0build() {Tabs({barPosition: BarPosition.End}) {TabContent() {Text('购物')}.tabBar(this.myBuildBar(0, '购物', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))TabContent() {Text('我的')}.tabBar(this.myBuildBar(1, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))// ...其他TabContent和tabBar的内容}.onChange((index: number) => {this.selectedIndex = index})}
}

在上面的代码中，myBuildBar函数用于构建自定义的TabBar，其中selectedIndex用于存储当前选中的TabBar索引。通过onChange事件监听TabBar的切换，并更新selectedIndex的值，从而实现高亮切换效果。

嵌套使用Tabs

Tabs内可以嵌套多个Tabs，以实现更复杂的布局。例如，可以在一个Tabs组件中嵌套另一个Tabs组件：

@Entry
@Component
struct NestedTabsDemo {title: string[] = ['直播', '推荐', '热门', '动画', '影视', '新征程', '军事', '体育', '八卦', '数码', '财经', '美食', '旅行']build() {Tabs({barPosition: BarPosition.End}) {TabContent() {Tabs() {ForEach(this.title, (item: string, index: number) => {TabContent() {Text(`${item}内容`)}.tabBar(`${item}`)})}.barMode(BarMode.Scrollable)}.tabBar('首页')// ...其他TabContent和tabBar的内容}.scrollable(false).animationDuration(3000)}
}