HarmonyOS利用Tabs组件实现页面切换
Tabs组件的利用概述
在我们常用的应用中，经常会有视图内容切换的场景，来展示更加丰富的内容。比如下面这个页面，点击底部的页签的选项，可以实现“首页”和“我的”
两个内容视图的切换。
https://i-blog.csdnimg.cn/blog_migrate/5ddac743aa402b67abb91f08505b8859.png
ArkUI开发框架提供了一种页签容器组件Tabs，开发者通过Tabs组件可以很容易的实现内容视图的切换。页签容器Tabs的形式多种多样，不同的页面操持页签不一样，可以把页签设置在底部、顶部或者侧边。
https://i-blog.csdnimg.cn/blog_migrate/c0fe94d719c81aaa5212a9366ae79a43.png
本文将具体介绍Tabs组件的利用。
Tabs组件的简朴利用
Tabs组件仅可包含子组件TabContent，每一个页签对应一个内容视图即TabContent组件。下面的示例代码构建了一个简朴的页签页面：
@Entry
@Component
struct TabsExample {
private controller: TabsController = new TabsController()
build() {
Column() {
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green)
}
.tabBar('green')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Blue)
}
.tabBar('blue')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Yellow)
}
.tabBar('yellow')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Pink)
}
.tabBar('pink')
}
.barWidth('100%') // 设置TabBar宽度
.barHeight(60) // 设置TabBar高度
.width('100%') // 设置Tabs组件宽度
.height('100%') // 设置Tabs组件高度
.backgroundColor(0xF5F5F5) // 设置Tabs组件背景颜色
}
.width('100%')
.height('100%')
}
}
结果图如下：
https://i-blog.csdnimg.cn/blog_migrate/ef097fc9321c7fab8ce70ca2f331cdf0.png
上面示例代码中，Tabs组件中包含4个子组件TabContent，通过TabContent的tabBar属性设置TabBar的显示内容。利用通用属性width和height设置了Tabs组件的宽高，利用barWidth和barHeight设置了TabBar的宽度和高度。
https://i-blog.csdnimg.cn/blog_migrate/ad1956c33263222b424b9a003e6f3747.png
DOC.NOTE
[*]TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
[*]TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
设置TabBar布局模式
因为Tabs的布局模式默认是Fixed的，所以Tabs的页签是不可滑动的。当页签比较多的时间，大概会导致页签显示不全，将布局模式设置为Scrollable的话，可以实现页签的滚动。
Tabs的布局模式有Fixed（默认）和Scrollable两种：
[*] BarMode.Fixed：全部TabBar平均分配barWidth宽度（纵向时平均分配barHeight高度）,页签不可滚动，结果图如下：
https://i-blog.csdnimg.cn/blog_migrate/e58087c99289defb0b8d145e83e14e8d.png
[*] BarMode.Scrollable：每一个TabBar均利用实际布局宽度，凌驾总长度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。
https://i-blog.csdnimg.cn/blog_migrate/d5af9d4eff33d8cca51721f879c80293.png
[*] 当页签比较多的时间，可以滑动页签，下面的示例代码将barMode设置为BarMode.Scrollable，实现了可滚动的页签：
@Entry
@Component
struct TabsExample {
private controller: TabsController = new TabsController()
build() {
Column() {
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor(Color.Green)
}
.tabBar('green')
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor(Color.Blue)
}
.tabBar('blue')
...
}
.barMode(BarMode.Scrollable)
.barWidth('100%')
.barHeight(60)
.width('100%')
.height('100%')
}
}
}
设置TabBar位置和排列方向
Tabs组件页签默认显示在顶部，某些场景下您大概希望Tabs页签出现在底部或者侧边，您可以利用Tabs组件接口中的参数barPosition设置页签位置。此外页签显示位置还与vertical属性相关联，vertical属性用于设置页签的排列方向，当vertical的属性值为false（默认值）时页签横向排列，为true时页签纵向排列。
barPosition的值可以设置为BarPosition.Start（默认值）和BarPosition.End：
[*] BarPosition.Start
vertical属性方法设置为false（默认值）时，页签位于容器顶部。
Tabs({ barPosition: BarPosition.Start }) {
...
}
.vertical(false)
.barWidth('100%')
.barHeight(60)
结果图如下：
https://i-blog.csdnimg.cn/blog_migrate/9bd461595c43d9d385a66c174bd5d222.png
vertical属性方法设置为true时，页签位于容器左侧。
Tabs({ barPosition: BarPosition.Start }) {
...
}
.vertical(true)
.barWidth(100)
.barHeight(200)
结果图如下：
https://i-blog.csdnimg.cn/blog_migrate/322c96ee42119d81e7a86052e3fec625.png
[*] BarPosition.End
vertical属性方法设置为false时，页签位于容器底部。
Tabs({ barPosition: BarPosition.End }) {
...
}
.vertical(false)
.barWidth('100%')
.barHeight(60)
结果图如下：
https://i-blog.csdnimg.cn/blog_migrate/ef5decc7525d297ab48308a90528b5a2.png
vertical属性方法设置为true时，页签位于容器右侧。
Tabs({ barPosition: BarPosition.End}) {
...
}
.vertical(true)
.barWidth(100)
.barHeight(200)
结果图如下：
https://i-blog.csdnimg.cn/blog_migrate/3d41a9785898e4f57c4f13a4d412a9fb.png
自定义TabBar样式
TabBar的默认显示结果如下所示：
https://i-blog.csdnimg.cn/blog_migrate/1a4371ce12b891591bb23a8f2c191706.png
往往开发过程中，UX给我们的操持结果大概并不是这样的，比如下面的这种底部页签结果：
https://i-blog.csdnimg.cn/blog_migrate/0c8c5a06ad034c43e84be8b41f0691be.png
TabContent的tabBar属性除了支持string范例，还支持利用@Builder装饰器修饰的函数。您可以利用@Builder装饰器，构造一个天生自定义TabBar样式的函数，实现上面的底部页签结果，示例代码如下：
@Entry
@Component
struct TabsExample {
@State currentIndex: number = 0;
private tabsController: TabsController = new TabsController();
@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)
.onClick(() => {
this.currentIndex = targetIndex;
this.tabsController.changeIndex(this.currentIndex);
})
}
build() {
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}
.tabBar(this.TabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
}
.tabBar(this.TabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))
}
.barWidth('100%')
.barHeight(50)
.onChange((index: number) => {
this.currentIndex = index;
})
}
}
示例代码中将barPosition的值设置为BarPosition.End，使页签显示在底部。利用@Builder修饰TabBuilder函数，天生由Image和Text构成的页签。同时也给Tabs组件设置了TabsController控制器，当点击某个页签时，调用changeIndex方法举行页签内容切换。
最后还必要给Tabs添加onChange事件，Tab页签切换后触发该事件，这样当我们左右滑动内容视图的时间，页签样式也会跟着改变。
参考
[*]Tabs组件的更多属性和参数的利用，可以参考API：Tabs。
changeIndex方法举行页签内容切换。
参考
[*]Tabs组件的更多属性和参数的利用，可以参考API：Tabs。
[*]@Builder装饰器的利用，可以参考：@Builder。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]