【HarmonyOS实战开发】如何实现增删Tab页签（ArkUI）

场景介绍

部分应用在使用过程中需要自定义添加或删除标签的场景，比如在浏览器中的顶部标签栏中需要新打开或关闭网页页签，而这种场景与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 =