【HarmonyOS Next】自定义Tabs

ops/2025/3/7 0:38:10/

背景

项目中Tabs的使用可以说是特别的频繁，但是官方提供的Tabs使用起来，存在tab选项卡切换动画滞后的问题。
请添加图片描述
原始动画无法满足产品的UI需求，因此，这篇文章将实现下面页面滑动，tab选项卡实时滑动的动画效果。
请添加图片描述

实现逻辑

需求讲解

  • 需要实现固定宽度下，放下6个选项卡。
  • 在没有选择时宽度均匀分配，选中时显示图标并且增加宽度。
  • 实现下方内容区域滑动时，上面选项卡实时跳动。
  • 实现动画效果，使整体操作更加流畅。

实现思路

1. 选项卡

  • 选项卡使用Row布局组件+layoutWeight属性，来实现平均布局。通过选项卡的选择索引来实现是否选中判断。
  • 选中时，layoutWeight值为1.5；没有选中时，layoutWeight值为1.
  • 使用animation属性，只要layoutWeight值变化时，可以触发动画。
  • 在外包裹的布局容器中，添加onAreaChange事件，用来计算整体Tab组件的宽度。
          Row() {Text(name).fontSize(16).fontWeight(this.SelectedTabIndex == index ? FontWeight.Bold : FontWeight.Normal).textAlign(TextAlign.Center).animation({ duration: 300 })Image($r('app.media.send')).width(14).height(14).margin({ left: 2 }).visibility(this.SelectedTabIndex == index ? Visibility.Visible : Visibility.None).animation({ duration: 300 })}.justifyContent(FlexAlign.Center).layoutWeight(this.SelectedTabIndex == index ? 1.5 : 1).animation({ duration: 300 })

2. 定位器

  • 使用Rect定义背景的形状和颜色+Stack布局+position属性，实现定位器的移动。
  • position属性中通过Left值的变化来实现Rect的移动。但是在swiper的滑动中会出现滑动一点然后松开的情况，因此，需要两个值同时在实现中间的移动过程。
      Stack() {Rect().height(30).stroke(Color.Black).radius(10).width(this.FirstWidth).fill("#bff9f2").position({left: this.IndicatorLeftOffset + this.IndicatorOffset,bottom: 0}).animation({ duration: 300, curve: Curve.LinearOutSlowIn })}.width("100%").alignRules({center: { anchor: "Tabs", align: VerticalAlign.Center }})

3.主要内容区

  • 使用Swiper组件加载对应的组件，这里需要注意的是，Demo没有考虑到内容比较多的优化方案，可以设置懒加载方案来实现性能的提升。
  • onAnimationStart事件，实现监测控件是向左移动还是向右移动，并且修改IndicatorLeftOffset偏移值。
  • onAnimationEnd事件，将中间移动过程值IndicatorOffset恢复成0。
  • onGestureSwipe事件，监测组件的实时滑动，这个事件在onAnimationStart和onAnimationEnd事件之前执行，执行完后才会执行onAnimationStart事件。因此，这个方法需要实时修改定位器的偏移数值。
  • 偏移数值是通过swiper的移动数值和整体宽度的比例方式进行计算，松手后的偏移方向，由onAnimationStart和onAnimationEnd事件来确定最终的距离
Swiper(this.SwiperController) {ForEach(this.TabNames, (name: string, index: number) => {Column() {Text(`${name} - ${index}`).fontSize(24).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height("100%").width("100%")})}.onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {if (targetIndex > index) {this.IndicatorLeftOffset += this.OtherWidth;} else if (targetIndex < index) {this.IndicatorLeftOffset -= this.OtherWidth;}this.IndicatorOffset = 0this.SelectedTabIndex = targetIndex}).onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {this.IndicatorOffset = 0}).onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {let move: number = this.GetOffset(extraInfo.currentOffset);//这里需要限制边缘情况if ((this.SelectedTabIndex == 0 && extraInfo.currentOffset > 0) ||(this.SelectedTabIndex == this.TabNames.length - 1 && extraInfo.currentOffset < 0)) {return;}this.IndicatorOffset = extraInfo.currentOffset < 0 ? move : -move;}).onAreaChange((oldValue: Area, newValue: Area) => {let width = newValue.width.valueOf() as number;this.SwiperWidth = width;}).curve(Curve.LinearOutSlowIn).loop(false).indicator(false).width("100%").id("MainContext").alignRules({top: { anchor: "Tabs", align: VerticalAlign.Bottom },bottom: { anchor: "__container__", align: VerticalAlign.Bottom }})

代码文件

  • 里面涉及到资源的小图标，可以自己区定义的，文章就不提供了。
@Entry
@ComponentV2
struct Index {/*** 标头名称集合*/@Local TabNames: string[] = ["飞机", "铁路", "自驾", "地铁", "公交", "骑行"]/*** Tab选择索引*/@Local SelectedTabIndex: number = 0/*** 标点移动距离*/@Local IndicatorLeftOffset: number = 0/*** 标点在swiper的带动下移动的距离*/@Local IndicatorOffset: number = 0/*** 第一个宽度*/@Local FirstWidth: number = -1/*** 其他的宽度*/@Local OtherWidth: number = -1/*** Swiper控制器*/@Local SwiperController: SwiperController = new SwiperController()/*** Swiper容器宽度*/@Local SwiperWidth: number = 0build() {RelativeContainer() {Stack() {Rect().height(30).stroke(Color.Black).radius(10).width(this.FirstWidth).fill("#bff9f2").position({left: this.IndicatorLeftOffset + this.IndicatorOffset,bottom: 0}).animation({ duration: 300, curve: Curve.LinearOutSlowIn })}.width("100%").alignRules({center: { anchor: "Tabs", align: VerticalAlign.Center }})Row() {ForEach(this.TabNames, (name: string, index: number) => {Row() {Text(name).fontSize(16).fontWeight(this.SelectedTabIndex == index ? FontWeight.Bold : FontWeight.Normal).textAlign(TextAlign.Center).animation({ duration: 300 })Image($r('app.media.send')).width(14).height(14).margin({ left: 2 }).visibility(this.SelectedTabIndex == index ? Visibility.Visible : Visibility.None).animation({ duration: 300 })}.justifyContent(FlexAlign.Center).layoutWeight(this.SelectedTabIndex == index ? 1.5 : 1).animation({ duration: 300 }).onClick(() => {this.SelectedTabIndex = index;this.SwiperController.changeIndex(index, false);animateTo({ duration: 500, curve: Curve.LinearOutSlowIn }, () => {this.IndicatorLeftOffset = this.OtherWidth * index;})})})}.width("100%").height(30).id("Tabs").onAreaChange((oldValue: Area, newValue: Area) => {let tabWidth = newValue.width.valueOf() as number;this.FirstWidth = 1.5 * tabWidth / (this.TabNames.length + 0.5);this.OtherWidth = tabWidth / (this.TabNames.length + 0.5);})Swiper(this.SwiperController) {ForEach(this.TabNames, (name: string, index: number) => {Column() {Text(`${name} - ${index}`).fontSize(24).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height("100%").width("100%")})}.onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {if (targetIndex > index) {this.IndicatorLeftOffset += this.OtherWidth;} else if (targetIndex < index) {this.IndicatorLeftOffset -= this.OtherWidth;}this.IndicatorOffset = 0this.SelectedTabIndex = targetIndex}).onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {this.IndicatorOffset = 0}).onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {let move: number = this.GetOffset(extraInfo.currentOffset);//这里需要限制边缘情况if ((this.SelectedTabIndex == 0 && extraInfo.currentOffset > 0) ||(this.SelectedTabIndex == this.TabNames.length - 1 && extraInfo.currentOffset < 0)) {return;}this.IndicatorOffset = extraInfo.currentOffset < 0 ? move : -move;}).onAreaChange((oldValue: Area, newValue: Area) => {let width = newValue.width.valueOf() as number;this.SwiperWidth = width;}).curve(Curve.LinearOutSlowIn).loop(false).indicator(false).width("100%").id("MainContext").alignRules({top: { anchor: "Tabs", align: VerticalAlign.Bottom },bottom: { anchor: "__container__", align: VerticalAlign.Bottom }})}.height('100%').width('100%').padding(10)}/*** 需要注意的点,当前方法仅计算偏移值，不带方向* @param swiperOffset* @returns*/GetOffset(swiperOffset: number): number {let swiperMoveRatio: number = Math.abs(swiperOffset / this.SwiperWidth);let tabMoveValue: number = swiperMoveRatio >= 1 ? this.OtherWidth : this.OtherWidth * swiperMoveRatio;return tabMoveValue;}
}

总结

这里实现了新的Tab选项卡的定义。但是没有进行高度封装，想法是方便读者理解组件的使用逻辑，而不是直接提供给读者进行调用。希望这篇文章可以帮助到你~~


http://www.ppmy.cn/ops/163736.html

相关文章

AutoGen学习笔记系列（六）Tutorial - Termination

AutoGen学习笔记系列（六）Tutorial - Termination

这篇文章瞄准的是AutoGen框架官方教程中的 Tutorial 章节中的 Termination 小节&#xff0c;主要介绍了更细粒度上图如何终止Team组内轮询的过程。 官网链接&#xff1a;https://microsoft.github.io/autogen/stable/user-guide/agentchat-user-guide/tutorial/termination.ht…
阅读更多...
mssql2008与mssql2014绿色版数据库软件，免安装，下载解压就可以使用

mssql2008与mssql2014绿色版数据库软件，免安装，下载解压就可以使用

mssql2008与mssql2014绿色版数据库软件&#xff0c;免安装&#xff0c;下载解压就可以使用 mssql2008与mssql2014绿色版数据库软件&#xff0c;免安装&#xff0c;下载解压就可以使用 下载地址&#xff1a; 通过网盘分享的文件&#xff1a;【软件】mssql2008与mssql2014绿色版数…
阅读更多...
my学习网址

my学习网址

文章目录 1.软件版本管控GIT学习网站大全1官方文档类2在线教程类3互动学习类4问答社区类 1.软件版本管控 GIT学习网站大全 廖雪峰网站 以下为你推荐不同类型的学习Git的网站&#xff1a; 1官方文档类 Git官方文档 网址&#xff1a;https://git-scm.com/doc link特点&#x…
阅读更多...
【Java面试】重载（Overload）和 重写（Override）的区别

【Java面试】重载（Overload）和 重写（Override）的区别

在Java编程中&#xff0c;重载&#xff08;Overload&#xff09; 和 重写&#xff08;Override&#xff09;是两个非常重要的概念&#xff0c;它们都与方法的行为相关&#xff0c;但有着本质的区别。理解它们的区别是Java面试中的常见考点。本文将详细解析重载和重写的区别&…
阅读更多...
直接法估计相机位姿

直接法估计相机位姿

引入 在前面的文章&#xff1a;运动跟踪——Lucas-Kanade光流中&#xff0c;我们了解到特征点法存在一些缺陷&#xff0c;并且用光流法追踪像素点的运动来替代特征点法进行特征点匹配的过程来解决这些缺陷。而这篇文章要介绍的直接法则是通过计算特征点在下一时刻图像中的位置…
阅读更多...
Spark核心之02：RDD、算子分类、常用算子

Spark核心之02：RDD、算子分类、常用算子

spark内存计算框架 一、目标 深入理解RDD弹性分布式数据集底层原理掌握RDD弹性分布式数据集的常用算子操作 二、要点 ⭐️1. RDD是什么 RDD&#xff08;Resilient Distributed Dataset&#xff09;叫做**弹性分布式数据集&#xff0c;是Spark中最基本的数据抽象&#xff0c…
阅读更多...
什么是 JVM？ JVM (Java Virtual Machine)

什么是 JVM？ JVM (Java Virtual Machine)

JVM&#xff08;Java Virtual Machine&#xff0c;Java 虚拟机&#xff09;是一个虚构出来的计算机&#xff0c;它是一种规范&#xff0c;有自己的指令集&#xff0c;并且在运行时操作各种内存区域。JVM 是 Java 平台的核心组成部分&#xff0c;负责执行 Java 字节码&#xff0…
阅读更多...
玩转大语言模型——Ubuntu系统环境下使用llama.cpp进行CPU与GPU混合推理deepseek

玩转大语言模型——Ubuntu系统环境下使用llama.cpp进行CPU与GPU混合推理deepseek

系列文章目录 玩转大语言模型——使用langchain和Ollama本地部署大语言模型 玩转大语言模型——三分钟教你用langchain提示词工程获得猫娘女友 玩转大语言模型——ollama导入huggingface下载的模型 玩转大语言模型——langchain调用ollama视觉多模态语言模型 玩转大语言模型—…
阅读更多...
最新文章

Copyright @ 2022~2023