【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 =
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值