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

于 2024-07-08 20:14:30 发布
阅读量635 收藏 22
点赞数 20
分类专栏： 鸿蒙 安卓 前端 文章标签： harmonyos 华为 鸿蒙 前端 安卓
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS_666/article/details/140277653
版权
鸿蒙 同时被 3 个专栏收录
199 篇文章 8 订阅
订阅专栏
前端
199 篇文章 0 订阅
订阅专栏
安卓
198 篇文章 0 订阅
订阅专栏

场景介绍

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

//自定义导航页签栏
@Builder
Tab(tabNumber: number) {
  Row({ space: 20 }) {
    Text("页签 " + tabNumber).fontSize(18)
    Image($r('app.media.ic_public_cancel_filled')).width(20).height(20)
  }
  .justifyContent(FlexAlign.Center)
  .constraintSize({ minWidth: 35 })
  .width(120)
  .height(30)
  .borderRadius({ topLeft: 10, topRight: 10 })
  .backgroundColor(this.tabArray.indexOf(tabNumber) === this.focusIndex ? "#ffffffff" : "#ffb7b7b7")
}

2.实现页签和页面视图的联动：这里主要通过TabsController的changeIndex来实现对应的试图跳转，但需要注意由于之后会增删数组元素的操作，所以此处传入的index值是选择页面的tabNumber在数组中的索引值。

this.focusIndex = this.tabArray.indexOf(tabNumber)

3.增添数组元素实现增加页签的效果：增添数组元素使用数组的push方法在tabArray添加数据即可，但由于此demo原始定义的数组是连续的自然数，后续增删数组会打乱原有顺序，所以此处处理为先判断最后一个元素的值再加1，由于TabBar的渲染是通过ForEach被@State修饰的数组，因此当tabArray中添加数据后系统会通知ForEach便利数组重新渲染页面。

this.tabArray.push(this.tabArray[this.tabArray.length - 1] + 1)

4.通常在添加新页面后，浏览器会将页面跳转到新添加的页面，因此在向tabArray中完成数据推送后，需要将页签通过TabsController中的changeIndex方法跳转到最后一个。

this.focusIndex = this.tabArray.length - 1
this.controller.changeIndex(this.focusIndex)

5.当用户选择另一个页签时，可通过自定义页签中通用事件onClick进行控制，当用户点击待选择的页签后，获取当前页签对应的下标，然后通过TabsController中的changeIndex方法进行跳转,此外可以通过更改页签背景颜色标识被选中页签的。

.backgroundColor(this.tabArray.indexOf(tabNumber) === this.focusIndex ? "#ffffffff" : "#ffb7b7b7")
.onClick(() => {
  this.focusIndex = this.tabArray.indexOf(tabNumber)
  this.controller.changeIndex(this.focusIndex)
})

6.删除页面有三种情况（删除不同位置的页面）。

●第一种情况是被关闭页面为最后一个页面，且当前选中的页面为最后一个页面，如果当前被选中页面是刚刚被其他页面创建的情况，因此页面需要跳回到创建被删除页签的页签（逻辑参考chrome浏览器）

if (this.pre >= 0) {
  this.focusIndex = this.pre
} 
this.tabArray.splice(this.tabArray.indexOf(tabNumber), 1)

●如果不是的话直接将当前显示页签下下标设置为前一个页签下标，tabArray数组通过splice方法删除页签，并通过TabsController完成跳转，此外页面只要有关闭操作，页面就不可以跳回打开该页面的页面，即将 pre设置为-1。

this.focusIndex = this.focusIndex - 1
this.tabArray.splice(this.tabArray.indexOf(tabNumber), 1)
this.pre = -1
this.controller.changeIndex(this.focusIndex)

第二种情况，当用户当前选择的不是最后一个标签，然后直接删除其他页签时，可以直接删除删除，但是需要重新计算当前选中页签在tabArray中的实时位置，到新注意需要排除用户在最后一个页签删除当前页签的情况。

//当前选择页面的对应数组中的数据值
let focusNumber = this.tabArray[this.focusIndex]
//用于判断是否是用户在最后一个页签删除当前页签的情况
if (this.tabArray.indexOf(focusNumber) >= 0) {
  this.focusIndex = this.tabArray.indexOf(focusNumber)
}
this.controller.changeIndex(this.focusIndex)

●第三种情况，当用户当前选择的不是最后一个标签，且删除被选中页面，直接删除，然后通过TabsController完成跳转，不需要额外操作。

说明

●由于Tabs组件中的导航页签栏会占满屏幕，导致添加按钮无法直接添加到与页签直接平齐的位置，因此通过层叠布局（Stack）的方式，将添加页签按钮覆盖到Tabs组件上，通过Stack中的对齐方式将添加按钮调整到合适位置。
●用于Tabs添加或删除子节点时，ForEach需要重新将所有页签进行重新渲染，如果在添加或删除完页签后直接调用TabsController中的changeIndex进行跳转，页面无法调到指定页签。这是由于ForEach还未将组件渲染完成，将子组件挂载到Tabs中，因此建议通过setTimeOut延迟一段时间再进行跳转，经过验证大概50ms后即可，开发者可再自行验证。

setTimeout(() => {
 this.controller.changeIndex(this.focusIndex)
}, 50)

完整实例

完整示例代码如下：

import util from '@ohos.util'

@Entry
@Component
struct Drag {
  //控制页签渲染的数组
  @State tabArray: Array<number> = [0]
  //Tabs组件当前显示的页签下标
  @State focusIndex: number = 0
  //创建页签时的页签index
  @State pre: number = -1
  //Tabs组件控制器，根据组件下标控制tab跳转
  private controller: TabsController = new TabsController()

  // 单独的页签
  @Builder
  Tab(tabNumber: number) {
    Row({ space: 20 }) {
      Text("页签 " + tabNumber).fontSize(18)
      Image($r('app.media.ic_public_cancel_filled')).width(20).height(20).onClick(() => {
        //获取Tabs组件当前显示的页签中显示的数字
        let focusNumber = this.tabArray[this.focusIndex]
        //被删除的页签是否是当前选中的页签，且是最后一个页签
        if (this.focusIndex === this.tabArray.indexOf(tabNumber) && this.focusIndex == this.tabArray.length - 1) {
          //判断是否需要跳回到创建该页签时的页签，如果不需要直接跳转到前一个页签
          if (this.pre >= 0) {
            this.focusIndex = this.pre
          } else {
            this.focusIndex = this.focusIndex - 1
          }
        }
        this.tabArray.splice(this.tabArray.indexOf(tabNumber), 1)
        this.pre = -1
        //对应删除页面中的第二种情况
        if (this.tabArray.indexOf(focusNumber) >= 0) {
          this.focusIndex = this.tabArray.indexOf(focusNumber)
        }
        //设置50ms 延迟跳转
        setTimeout(() => {
          this.controller.changeIndex(this.focusIndex)
        }, 50)
      })
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .width(120)
    .height(30)
    .borderRadius({ topLeft: 10, topRight: 10 })
    .backgroundColor(this.tabArray.indexOf(tabNumber) === this.focusIndex ? "#ffffffff" : "#ffb7b7b7")
    .onClick(() => {
      this.focusIndex = this.tabArray.indexOf(tabNumber)
      setTimeout(() => {
        this.controller.changeIndex(this.focusIndex)
      }, 50)
    })
  }

  build() {
    Column() {
      Column() {
        // 页签
        // Row() {
        Stack() {
          Row({ space: 7 }) {
            //tabs
            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)
          }.width("100%")

          Row() {
            Image($r('app.media.ic_public_add_filled')).onClick(() => {
              if (this.tabArray.length === 0) {
                this.tabArray.push(0)
                this.focusIndex = this.tabArray.length - 1
              } else {
                this.pre = this.focusIndex
                this.tabArray.push(this.tabArray[this.tabArray.length - 1] + 1)
                this.focusIndex = this.tabArray.length - 1
              }
              setTimeout(() => {
                this.controller.changeIndex(this.focusIndex)
              }, 50)
            }).width(20).height(20)
          }.height(30).width(30).backgroundColor("#ffb7b7b7")
          .justifyContent(FlexAlign.Center)
        }
        .alignContent(Alignment.TopEnd)
        .width('100%')
        .backgroundColor("#ffb7b7b7")
      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')
    }
    .height('100%')
  }
}

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我两个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。在这里插入图片描述

「已注销」
关注
专栏目录
HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 13万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
HarmonyOS实战开发-如何实现一个简单的健康生活应用（上）
2401_82546228的博客
03-31 1181
用户点击悬浮按钮进入任务列表页，点击任务列表可进入对应任务编辑的页面中，对任务进行详细的设置，之后点击完成按钮编辑任务后将返回首页。在组件CustomDialogView的aboutToAppear生命周期中注册SHOW_TASK_DETAIL_DIALOG的事件回调方法 ，当通过emit触发此事件时即触发回调方法执行。@Component// 成就对话框});// 任务时钟对话框});// 成就对话框});// 任务时钟对话框});build() {
多款精美的tab页签样式任你挑选
05-12
多款好看的tab页签样式，希望对你有所帮助
鸿蒙ArkUI开发-实现增删Tab页签
鸿蒙的技术博客
01-26 1458
部分应用在使用过程中需要自定义添加或删除标签的场景，比如在浏览器中的顶部标签栏中需要新打开或关闭网页页签，而这种场景与Tabs组件效果类似，但Tabs组件不提供增加或删除页签的功能，不能自由的增加删除页签，需要开发者自己实现Tabs中增删页签功能。本文以浏览器中增加或删除页签为例，实现Tabs中页签的增删功能。
鸿蒙开发实战：灵活定制Tabs组件，实现个性化页签布局
06-18 396
鸿蒙开发还是比较容易上手的，大家如果对鸿蒙开发感兴趣，闪客以后可以分享更多相关教程实战案例，欢迎关注！纯血鸿蒙越来越火，鸿蒙开发者越来越多，招聘需求也越来越多，创建了一个鸿蒙应用开发 知识星球社群：
HarmonyOS Next Tab组件实现增删Tab标签案例
2401_84181731的博客
04-11 184
|—HandleTabs.ets // 增删tab页签功能实现页面。| |—TabSheetComponent.ets // 自定义TabBar组件。| |—constantsData.ets // 定义常量数据。| |—MenuBar.ets // 工具栏。Image(‘add’) // 新增页签。
HarmonyOS NEXT应用开发案例——自定义TabBar
1
03-08 1729
本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示，并有一小段动画效果。
鸿蒙实战开发-如何实现时钟、闹钟、倒计时、设置屏幕亮度相功能
2401_82546228的博客
04-01 2200
本示例集中展示了时钟、闹钟、倒计时、设置屏幕亮度相关的场景，
OpenHarmony实战开发-如何实现聊天实例应用。
2401_82546228的博客
04-02 769
这是一个仿聊天类应用，使用了静态布局搭建了不同的页面。为了优化内存与性能体验，在部分list场景使用了懒加载。
鸿蒙HarmonyOS实战-ArkUI组件（Tabs）_harmonyos tabs，鸿蒙开发面试基础
2301_82241698的博客
04-16 982
自定义导航栏是指在应用开发中，开发者使用自己定制的视图代替系统自带的导航栏，以实现更加自由、灵活和符合应用风格的导航栏。自定义导航栏可以包括各种 UI 元素，例如按钮、文本、图片、标签等，以满足不同应用的需求。自定义导航栏可以帮助应用创建独特的风格和品牌形象，提高用户体验和应用的可用性。Column() {Column(){Text(‘我的内容’)
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Tabs容器组件
zy0412326的专栏
03-14 1558
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Tabs容器组件。
鸿蒙实战案例（三）
最新发布
2301_77718676的博客
06-25 447
点击食物后面的加号时，会跳出一个食物面板，这个面板上会跳出具体的食物信息。例如，现在我们就要完成这个界面。整个列表页是一个列式布局代码为：运行结果。
JavaScript选项卡/页签/Tab的实现
weixin_34195546的博客
11-14 307
选项卡，也称页签，英文用Tab(Module-Tabs)表示。Tab将不同的内容重叠放在一个布局块内，重叠的内容区里每次只有其中一个是可见的。 Tab可以在相同的空间里展示更多的信息，它把相似的主题分为一类，用户更好理解。Tab的应用可以缩短页面屏长，降低信息的显示密度，同时又不牺牲信息量。在这种趋势下，Tab这种交互元素成为了一个越来越普遍的应用。 Web里Tab可能最早2005年是amaz...
tab页签-代码部分
weixin_42192909的博客
11-17 279
tab页签-代码部分 child import React,{useEffect, useState} from 'react' const Child = (props: any) => { const [loading,setLoading] = useState(true) useEffect(()=>{ setTimeout(()=>{ setLoading(false) },2000) },[]) return ( <d
ABAP TAB页签的实现
酔墨诗欣的博客
10-26 474
本代码主要实现了TAB页签，页签比按钮效果更加直观，由于项目上很多程序大多选择按钮的方式进行切换，按钮一旦多起来，给用户的体验感就会变差，为此，我将按钮转换成了这种TAB页签的方式。
tab页签添加关闭
编程技术分享，Java后端、Vue前端
11-23 1723
目前市场上的ui框架貌似都没有页签添加关闭功能，学习网上的代码，整合了一个实例 页签添加、关闭实例： &lt;!DOCTYPE html&gt; &lt;html lang="ch-cn"&gt; &lt;head&gt; 　　&lt;meta charset="utf-8"&gt; 　　&lt;script src="../skeleton/jquery-1.11
Tab页签的变化
weixin_42192909的博客
11-17 439
Tab切换(初始版) 场景 ​ 实现一个tab页签，当你点击时tab页签的内容才会加载，并且加载的数据第二次点击的时候数据已经缓存。分为动画切换以及非动画切换效果,效果如图所示 ​ ​ 这个用的别人封装的基础组件，对这个比较感兴趣，就尝试实现了下.使用代码如下(模拟了之前基础组件的使用方式) const Index = () => { const [topBars,setTopBars] = useState(['aaa','bbb','ccc']) const [activeKey,set
鸿蒙应用开发
JAVA_LDZ的博客
11-02 352
鸿蒙基础应用控件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值