HarmonyOS NEXT应用开发—自定义视图实现Tab效果

介绍

本示例介绍使用Text、List等组件,添加点击事件onclick,动画,animationTo实现自定义Tab效果。

效果预览图

使用说明

  1. 点击页签进行切换,选中态页签字体放大加粗,颜色由灰变黑,起到强调作用,同时,底部颜色条横线位移到当前选中页签下方,内容区翻页到当前选中页签对应区域。

实现思路

  1. 页签实现:添加onClick方法,记录点击的index,index变化后,改变页签颜色、字体大小,使用animateTo方法实现页签切换动画。 源码参考CustomView.ets。
Text(title)
  .textAlign(TextAlign.Center)
  .height($r('app.integer.width_and_height_value4'))
  .width(this.titleLengthRadix3 * title.length)
  .fontColor(this.currentIndex == idx ?
            (this.wantGoIndex == idx ? $r('app.color.background_color1'):$r('app.color.background_color2')):
            (this.wantGoIndex == idx ? $r('app.color.background_color1'):$r('app.color.background_color2')))
  .fontSize(this.currentIndex == idx ? $r('app.integer.font_size2') : $r('app.integer.font_size1'))
  .fontWeight(this.currentIndex == idx ? FontWeight.Bold : FontWeight.Normal)
  .onClick(() => {
    if (this.currentIndex != idx) {
      // 记录点击index
      this.wantGoIndex = idx;
      // 动画效果
      animateTo({
        duration: Math.abs(idx - this.currentIndex) * this.durationRadix,
        curve: Curve.EaseInOut,
        iterations: this.iterationsDefault,
        playMode: PlayMode.Normal,
        onFinish: () => {
          this.currentIndex = idx;
          this.scroller.scrollToIndex(this.currentIndex, true, ScrollAlign.START);
        }
      }, () => {
        this.transitionX = this.getTransitionX(idx);
      })
    }
  })
  1. 内容区实现:使用List,添加滑动手势来进行页面的切换,手势响应后,使用scrollToIndex方法来实现平滑的滑动到相应index。 源码参考CustomView.ets。
PanGesture(this.panOption)
  .onActionUpdate((event:GestureEvent) => {
    if (!this.isStartAction) {
      this.isStartAction = true;
      if (event.offsetX < this.judgmentValue) {
        if (this.currentIndex < this.titleArray.length - this.currentIndexRadix) {
          let temIndex: number = this.currentIndex + this.currentIndexRadix;
          this.scroller.scrollToIndex(temIndex, true, ScrollAlign.START);
          this.wantGoIndex = temIndex;
          animateTo({
            duration: Math.abs(temIndex - this.currentIndex) * this.durationRadix,
            curve: Curve.EaseInOut,
            iterations: this.iterationsDefault,
            playMode: PlayMode.Normal,
            onFinish: () => {
              this.currentIndex = temIndex;
            }
          }, () => {
            this.transitionX = this.getTransitionX(temIndex);
          })
        }
      } else {
        if (this.currentIndex > this.judgmentValue) {
          let temIndex: number = this.currentIndex - this.currentIndexRadix;
          this.scroller.scrollToIndex(temIndex, true, ScrollAlign.START);
          this.wantGoIndex = temIndex;
          animateTo({
            duration: Math.abs(temIndex - this.currentIndex) * this.durationRadix,
            curve: Curve.EaseInOut,
            iterations: this.iterationsDefault,
            playMode: PlayMode.Normal,
            onFinish: () => {
              this.currentIndex = temIndex;
            }
          }, () => {
            this.transitionX = this.getTransitionX(temIndex);
          })
        }
      }
    }
  })

高性能知识点

scrollToIndex方法,开启smooth动效时,会对经过的所有item进行加载和布局计算,当大量加载item时会导致性能问题

工程结构&模块类型

customview                                       // har类型
|---view
|   |---CustomView.ets                           // 视图层-自定义视图实现Tab效果

模块依赖

utils

参考资料

PanGesture 事件

animateTo 显示动画

scrollToIndex 方法

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助: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

腾讯T10级高工技术,安卓全套VIP课程全网免费送:https://qr21.cn/D2k9D5

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/462366.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

7. 字符串和集合(重点)

常见API API &#xff08;全称 Application Programming Interface&#xff1a;应用程序编程接口&#xff09;就是别人写好的一些程序&#xff0c;给咱们程序员直接拿去调用即可解决问题的。 1 包 1.1 什么是包&#xff1f; 包是用来分门别类的管理各种不同程序的&#xff…

通用大模型研究重点之三:Model APPs

Embedding背景 Embedding 起源于 Word Embedding&#xff0c;经过多年的发展&#xff0c;已取得长足进步。从横向发展来看&#xff0c;由原来单纯的 Word Embedding&#xff0c;发展成现在的Item Embedding、Entity Embedding、Graph Embedding、Position Embedding、Segment …

业务服务:任务调度中心

文章目录 前言一、Scheduled的使用1. 快速使用2. 参数分析 二、xxl-job的使用1. 创建数据库2. 搭建任务调度应用3. 服务注册到xxl-job4. 快速入门5. 任务参数6. 命令行任务7. 跨平台远程调用8. 初始化与销毁9. 邮件报警 前言 任务调度中心&#xff0c;常被用于发送任务&#x…

StarRocks面试题及答案整理,最新面试题

StarRocks 的 MV&#xff08;物化视图&#xff09;机制是如何工作的&#xff1f; StarRocks 的物化视图&#xff08;MV&#xff09;机制通过预先计算和存储数据的聚合结果或者转换结果来提高查询性能。其工作原理如下&#xff1a; 1、数据预处理&#xff1a; 在创建物化视图时…

微信小程序调试、断点调试

1、wxml 查看对应的页面组件 2、console面板可以用来打印信息 3、sources 用来断点调试 4、network面板用来调试接口 5、storage面板 可以查看每个key对应的value内容&#xff0c;这些数据在用户使用小程序时被持久化保存在本地。

【AIGC】重磅消息,GPT-4.5 Turbo将在6月发布?

2024 年 AI 辅助研发趋势 文章目录 强烈推荐GPT-4.5 Turbo竞争对手Anthropic的Claude 3谷歌的Gemini 1.5 Pro 总结强烈推荐专栏集锦写在最后 强烈推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击…

仿牛客项目Day8:社区核心功能2

显示评论 数据库 entity_type代表评论的目标类型&#xff0c;评论帖子和评论评论 entity_id代表评论的目标id&#xff0c;具体是哪个帖子/评论 targer_id代表评论指向哪个人 entity public class Comment {private int id;private int userId;private int entityType;priv…

Linux 进程控制进程终止

目录 一、fork函数 1、概念 2、父子进程的共享 3、 为什么父子进程会从fork()调用之后的位置继续执行代码 4、写时拷贝 5、为什么需要写时拷贝 6、写时拷贝的好处 7、fork常规用法 8、fork调用失败的原因 9、查看系统最大进程数 二、进程终止 1、进程退出场景 2、…

鲸鱼优化算法双馈风电机组一次调频三机九节点虚拟惯量下垂控制DFIG matlab/simulink

以频率偏差变化最小为优化目标&#xff0c;采用鲸鱼算法优化风电机组一次调频控制系数。 采用matlab.m文件与simulink.slx文件联合。 系统频率优化结果 鲸鱼算法 时域模型

Learn OpenGL 14 混合

混合 OpenGL中&#xff0c;混合(Blending)通常是实现物体透明度(Transparency)的一种技术。透明就是说一个物体&#xff08;或者其中的一部分&#xff09;不是纯色(Solid Color)的&#xff0c;它的颜色是物体本身的颜色和它背后其它物体的颜色的不同强度结合。一个有色玻璃窗是…

SwiftUI的毛玻璃效果

SwiftUI的毛玻璃效果 记录一下 SwiftUI的毛玻璃效果 import SwiftUI /*extension ShapeStyle where Self Material {/// A material thats somewhat translucent.public static var regularMaterial: Material { get }/// A material thats more opaque than translucent.pub…

生命周期、wxs

1. 什么是生命周期 生命周期&#xff08; Life Cycle &#xff09;是指一个对象从创建 -> 运行 -> 销毁的整个阶段&#xff0c;强调的是一个时间段。例如&#xff1a;  张三出生&#xff0c;表示这个人生命周期的开始  张三离世&#xff0c;表示这个人生命周期的结束…

接口测试之文件下载

在工作中对于下载接口&#xff0c;经常会有这样的疑问&#xff1a;这类接口一般功能比较稳定&#xff0c;但是又比较重要&#xff0c;需要占用回归测试时间&#xff0c;有没有可替代的方式&#xff1f; 答案肯定是有的&#xff0c;可以从接口测试/UI自动化测试介入&#xff0c…

Ubuntu Desktop - gnome-calculator (计算器)

Ubuntu Desktop - gnome-calculator [计算器] 1. Ubuntu Software -> gnome-calculator -> Install -> Continue2. Search your computer -> Calculator -> Lock to LauncherReferences 1. Ubuntu Software -> gnome-calculator -> Install -> Continu…

pta上的几个例题

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话&#xff1a; 知不足而奋进&#xff0c;望远山而前行&am…

基于SpringBoot SSM vue办公自动化系统

基于SpringBoot SSM vue办公自动化系统 系统功能 登录 个人中心 请假信息管理 考勤信息管理 出差信息管理 行政领导管理 代办事项管理 文档管理 公告信息管理 企业信息管理 会议室信息管理 资产设备管理 员工信息管理 开发环境和技术 开发语言&#xff1a;Java 使用框架: S…

代码随想录|Day22|回溯02|216.组合总和III、17.电话号码的字母组合

216.组合总和III 本题思路和 77. 组合 类似&#xff0c;在此基础上多了一个和为 n 的判断。 class Solution:def combinationSum3(self, k: int, n: int) -> List[List[int]]:def backtrack(start, path, currentSum):# 递归终止条件&#xff1a;到达叶子节点# 如果和满足条…

替代 VMware ,为什么需要重新考虑您的存储?

国内大部分 VMware 用户使用的是 vSphere&#xff0c;很少使用 vSAN&#xff0c;这使得在国内&#xff0c;企业实施 VMware 替代时&#xff0c;考虑最多的因素很可能是存储。企业级块存储产品 XEBS&#xff0c;作为业界最开放的中立的专业软件定义存储&#xff08;SDS&#xff…

数字电子技术实验(四)

单选题 1.组合逻辑电路中产生竞争冒险的原因是&#xff1f; A. 电路没有最简化 。 B. 时延 。 C. 电路有多个输出。 D. 逻辑门的类型不同。 答案&#xff1a;B 评语&#xff1a;10分 单选题 2.下列表达式不存在竞争冒险的有&#xff1f; 答案&#xff1a;A 评语&#x…

进入jupyter notebook发现没有虚拟环境,最简单实用的解决办法!

jupyter notebook 1. 进入jupyter notebook发现没有虚拟环境2.解决办法2.1 检查是否有库ipykernel&#xff0c;我发现我没有2.2 开始安装ipykernel2.3 将虚拟环境写入 总结 1. 进入jupyter notebook发现没有虚拟环境 2.解决办法 2.1 检查是否有库ipykernel&#xff0c;我发现我…