【鸿蒙开发示例代码】Tab组件实现增删Tab标签

示例代码合集地址：

HarmonyOS示例代码-鸿蒙系统示例代码-华为开发者联盟 (huawei.com)

代码工程地址：

HandleTabs: 本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。该场景多用于浏览器等场景。 (gitee.com)

Tab组件实现增删Tab标签

介绍

本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。该场景多用于浏览器等场景。

效果图预览

使用说明

1. 点击新增按钮，新增Tab页面。
2. 点击删除按钮，删除Tab页面。

目录结构

handletabs
│  ├──entryability
│  │  └──EntryAbility.ets
│  ├──model
│  │  └──ConstantsData.ets                       // 数据类
│  └──pages
│     ├──HandleTabs.ets                          // 增删tab页签功能实现页面
│     ├──MenuBar.ets                             // 工具栏
│     └──TabSheetComponent.ets                   // 自定义TabBar组件
└────entry/src/main/resources 

实现思路

1. 设置Tab组件的barHeight为0，隐藏组件自带的TabBar。
2. 使用@Link修饰符，将自定义TabBar组件和Tab组件通过focusIndex和tabArray进行双向绑定。
3. 在自定义TabBar中修改focusIndex和tabArray的值时，Tab组件根据数据变化进行对应UI变更。

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行，支持设备：华为手机。

2.HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。

3.DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。

4.HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。