HarmonyOS NEXT应用开发之Tab组件实现增删Tab标签

介绍

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

效果图预览

使用说明

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

实现思路

  1. 设置Tab组件的barHeight为0,隐藏组件自带的TabBar。

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

  2. 使用@Link修饰符,将自定义TabBar组件和Tab组件通过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,()=>{
         ...
       })
     }
    
     ...

    }
    }

  3. 在自定义TabBar中修改focusIndex和tabArray的值时,Tab组件根据数据变化进行对应UI变更

    //TabSheetComponent.ets
    Image('add') // 新增页签
    .onClick(() => {
    this.tabArray.push(item)
    })

    ...

    Image('close') // 关闭指定索引页签
    .onClick(() => {
    this.tabArray.splice(index, 1)
    })

    ...

    this.focusIndex = index; // 跳转到指定索引值

高性能知识点

本示例使用了ForEach进行数据懒加载,ForEach第三个入参keyGenerator唯一时,动态修改ForEach时,可降低渲染开销。

工程结构&模块类型

复制代码
handletabs                                      // har包
|---model
|   |---constantsData.ets                       // 定义常量数据
|---pages                        
|   |---HandleTabs.ets                          // 增删tab页签功能实现页面
|   |---MenuBar.ets                             // 工具栏
|   |---TabSheetComponent.ets                   // 自定义TabBar组件

模块依赖

当前场景依赖common模块的FunctionDescription组件,主要用于功能场景文本介绍。详细可参考FunctionDescription文件。

参考资料

ForEach使用说明

Tabs组件使用说明

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:https://qr21.cn/FV7h05

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ......

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ......

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ......

大厂鸿蒙面试题:https://qr21.cn/FV7h05

鸿蒙开发面试大盘集篇(共计319页):https://qr21.cn/FV7h05

1.项目开发必备面试题

2.性能优化方向

3.架构方向

4.鸿蒙开发系统底层方向

5.鸿蒙音视频开发方向

6.鸿蒙车载开发方向

7.鸿蒙南向开发方向

相关推荐
问道飞鱼34 分钟前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
呆呆的小鳄鱼1 小时前
leetcode:冗余连接 II[并查集检查环][节点入度]
算法·leetcode·职场和发展
周胡杰2 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦3 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
浮生带你学Java10 小时前
2025Java面试题及答案整理( 2025年 7 月最新版,持续更新)
java·开发语言·数据库·面试·职场和发展
迷曳12 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
墨染点香12 小时前
LeetCode Hot100【5. 最长回文子串】
算法·leetcode·职场和发展
im_AMBER15 小时前
Leetcode 03 java
算法·leetcode·职场和发展
轮到我狗叫了15 小时前
力扣.1312让字符串成为回文串的最少插入次数力扣.105从前序和中序遍历构造二叉树牛客.拼三角力扣.57插入区间编辑
算法·leetcode·职场和发展
呆呆的小鳄鱼15 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划