#鸿蒙通关秘籍#如何使用Tab组件来自定义增删Tab页签？

使用HarmonyOS中的Tab组件实现自定义增删Tab页签，可以按照以下步骤进行：

1. 在Tabs组件中将barHeight属性设置为0，以隐藏默认的TabBar。

   Tabs() {
       ...
   }
   .barHeight(0) // 隐藏tab组件自带的tabbar
   1.
   2.
   3.
   4.

   复制

2. 通过@Link修饰符，将自定义TabBar组件与Tabs组件进行双向绑定，将focusIndex和tabArray这两个变量进行联动操作。

   //TabSheetComponent.ets
   @Component
   struct TabSheetComponent {
       @Link tabArray: Array<number>
       @Link focusIndex: number
   
       build() {
           ...
       }
   }
   
   //HandleTabs.ets
   @Component
   struct HandleTabs {
       @State tabArray: Array<number> = [0]; // 控制页签渲染的数组
       @State focusIndex: number = 0; // Tabs组件当前显示的页签下标
   
       build() {
           ...
   
           TabSheetComponent({ tabArray: $tabArray, focusIndex: $focusIndex })
           Tabs({ index: this.focusIndex }) {
               ForEach(this.tabArray,()=>{
                   ...
               })
           }
   
           ...
       }
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.
   22.
   23.
   24.
   25.
   26.
   27.
   28.
   29.
   30.

   复制

3. 使用交互事件在自定义TabBar中修改focusIndex和tabArray的值，实现页签的增删功能。

   //TabSheetComponent.ets
   Image('add') // 新增页签
       .onClick(() => {
           this.tabArray.push(item)
       })
   
   ...
   
   Image('close') // 关闭指定索引页签
       .onClick(() => {
           this.tabArray.splice(index, 1)
       })
   
   ...
   
   this.focusIndex = index; // 跳转到指定索引值
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.

   复制