场景介绍
部分应用在使用过程中需要自定义添加或删除标签的场景,比如在浏览器中的顶部标签栏中需要新打开或关闭网页页签,而这种场景与Tabs组件效果类似,但Tabs组件不提供增加或删除页签的功能,不能自由的增加删除页签,需要开发者自己实现Tabs中增删页签功能。本文以浏览器中增加或删除页签为例,实现Tabs中页签的增删功能。
效果呈现
如下动图所示:
环境要求
本例基于以下环境开发,开发者也可以基于其他适配的版本进行开发:
●IDE: DevEco Studio 4.0 Release
●SDK: Ohos_sdk_public 4.0.10.13 (API Version 10 Release)
实现原理
本例涉及的关键特性以及实现方案如下:
●通过@Builder自定义封装一个导航页签栏,并通过ForEach完成对Tabs组件的内容页和导航页签栏的动态渲染。
●通过TabsController的changeIndex可实现页面的跳转,传入的index是数组中对应的索引值。
●页签的增加通过数组的push方法,增加数组元素。
●删除页签通过通过删除页面对应数组的索引值处的数据完成,删除后页面跳转位置根据业务逻辑要求确定跳转页面对应的索引值。
开发步骤
1.整体布局分为两部分:页面内容和页签部分。页面视图部分使用Tabs,其中页签对应显示的内容需要放入TabContent组件中。页签部分通过@Builder自定义封装一个tabBar组件,放入Tabs中的tabBar属性中。
页面视图代码块:
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
ForEach(this.tabArray, (item: number) => {
TabContent() {
Text('我是页面 ' + item + " 的内容")
.height('100%')
.width('100%')
.fontSize(30)
.backgroundColor("#ffffffff")
}.tabBar(this.Tab(item))
}, (item: number) => item.toString() + util.generateRandomUUID())
}
.barMode(BarMode.Scrollable, { margin: 30 })
.onChange((index) => {
this.focusIndex = index
})
.barHeight(30)
自定义tabBar代码块:
//控制页签渲染的数组
@State tabArray: Array<number> = [0]
//Tabs组件当前显示的页签
@State focusIndex: number = 0
//创建页签时的页签index
@State pre: number = -1
//Tabs组件控制器,根据组件下标控制tab跳转
private controller: TabsController =