Tabs
一、概述
- 当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。
1. Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。
- TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
- TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
2. 每一个TabContent对应的内容需要有一个页签，可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置属性tabBar，可以设置其对应页签中的内容，tabBar作为内容的页签。
Tabs() {
TabContent() {
Text('首页的内容').fontSize(30)
}
.tabBar('首页')
TabContent() {
Text('分类的内容').fontSize(30)
}
.tabBar('分类')
TabContent() {
Text('消息的内容').fontSize(30)
}
.tabBar('消息')
TabContent() {
Text('我的内容').fontSize(30)
}
.tabBar("我的")
}
3、 BarPosition 导航栏位置
a. 底部导航
Tabs({ barPosition: BarPosition.End }) {
// TabContent的内容：首页、分类、消息、我的
...
}
b. 顶部导航
Tabs({ barPosition: BarPosition.Start }) {
// TabContent的内容:关注、视频、游戏、数码、科技、体育、影视
...
}
c. 侧边导航
- 实现侧边导航栏需要设置Tabs的属性vertical为true。在底部导航和顶部导航实现中，其默认值为false，表明内容页和导航栏垂直方向排列。
- vertical为true时，tabbar宽度会默认撑满屏幕的宽度，需要设置barWidth为合适值。
- vertical为true时，tabbar的高度会默认实际内容高度，需要设置barHeight为合适值。
Tabs({ barPosition: BarPosition.Start }) {
// TabContent的内容:首页、分类、消息、我的
...
}
.vertical(true)
.barWidth(100)
.barHeight(200)
4、scrollable 限制导航栏的滑动切换
- 控制滑动切换的属性为scrollable，默认值为true，表示可以滑动，若要限制滑动切换页签则需要设置为false。
Tabs({ barPosition: BarPosition.End }) {
TabContent(){
Column(){
Tabs(){
// 顶部导航栏内容
...
}
}
.backgroundColor('#ff08a8f1')
.width('100%')
}
.tabBar('首页')
// 其他TabContent内容：分类、消息、我的
...
}
.scrollable(false)
5、BarMode 固定导航栏
- 固定导航栏不可滚动，无法被拖拽滚动，内容均分tabBar的宽度。
a. Tabs的属性barMode是控制导航栏是否可以滚动，默认值为Fixed，表示为固定导航栏。
Tabs({ barPosition: BarPosition.End }) {
// TabContent的内容：首页、分类、消息、我的
...
}
.barMode(BarMode.Fixed)
b. Tabs的属性barMode是控制导航栏是否可以滚动，设置为Scrollable即可设置为可滚动导航栏。
Tabs({ barPosition: BarPosition.Start }) {
// TabContent的内容：关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事
...
}
.barMode(BarMode.Scrollable)
二、自定义导航栏
- 系统默认情况下采用了下划线标志当前活跃的页签，而自定义导航栏需要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。
1. 设置自定义导航栏需要使用的TabBar参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。
@Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: 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)
}
2. 在TabContent对应tabBar属性中传入自定义函数组件，并传递相应的参数。
TabContent() {
Column(){
Text('我的内容')
}
.width('100%')
.height('100%')
.backgroundColor('#007DFF')
}
.tabBar(this.TabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))
三、 切换至指定页签
- 在不使用自定义导航栏时，系统默认的Tabs会实现切换逻辑。在使用了自定义导航栏后，切换页签的逻辑需要手动实现。即用户点击对应页签时，屏幕需要显示相应的内容页。
1. 切换指定页签需要使用TabsController，TabsController是Tabs组件的控制器，用于控制Tabs组件进行页签切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。
- this.tabsController.changeIndex(this.currentIndex);
private tabsController : TabsController = new TabsController()
@State currentIndex:number = 0;
@Builder TabBuilder(title: string, targetIndex: number) {
Column() {
Text(title)
.fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
}
...
.onClick(() => {
this.currentIndex = targetIndex;
this.tabsController.changeIndex(this.currentIndex);
})
}
2. 使用自定义导航栏时，在tabBar属性中传入对应的@Builder，并传入相应的参数。
- this.TabBuilder('发现',1)
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent(){
...
}.tabBar(this.TabBuilder('首页',0))
TabContent(){
...
}.tabBar(this.TabBuilder('分类',1))
TabContent(){
...
}.tabBar(this.TabBuilder('消息',2))
TabContent(){
...
}
.tabBar(this.TabBuilder('我的',3))
}
四、滑动切换导航栏
在不使用自定义导航栏的情况下，Tabs默认会实现tabBar与TabContent的切换联动。但在使用了自定义导航栏后，使用TabsController可以实现点击页签与页面内容的联动，但不能实现滑动页面时，页面内容对应页签的联动。即用户在使用滑动屏幕切换页面内容时，页签栏需要同步切换至内容对应的页签。
1. 需要使用Tabs提供的onChange事件方法，监听索引index的变化，并将其当前活跃的index值传递给currentIndex，实现页签内容的切换。
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent() {
...
}.tabBar(this.TabBuilder('首页', 0))
TabContent() {
...
}.tabBar(this.TabBuilder('分类', 1))
TabContent() {
...
}.tabBar(this.TabBuilder('消息', 2))
TabContent() {
...
}
.tabBar(this.TabBuilder('我的', 3))
}.onChange((index) => {
this.currentIndex = index
})
