首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

鸿蒙HarmonyOS实战-ArkUI事件(组合手势)

  • 25-02-22 03:40
  • 2953
  • 14214
blog.csdn.net

一、组合手势

应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。

HarmonyOS中常见的手势操作及其功能:

手势操作功能描述
滑动手势在屏幕上快速滑动手指,可实现页面切换、滚动查看内容等功能
点击手势轻触屏幕一次,可实现按钮点击、应用打开等功能
双击手势连续快速点击屏幕两次,可实现放大图片、双击打开应用等功能
长按手势在屏幕上长时间按住手指,可弹出上下文菜单或进行拖拽、复制等操作
捏合手势使用两个手指在屏幕上同时向内或向外移动,可实现缩放、放大和缩小等功能
旋转手势使用两个手指在屏幕上同时顺时针或逆时针旋转,可实现旋转图片、屏幕方向切换等功能
拖拽手势长按住一个物体后,移动手指进行拖拽,可实现图标排序、文件移动等功能
双指滑动手势使用两个手指在屏幕上同时滑动,可实现快速滚动、切换页面等操作

组合手势是由多个手势组合而成的手势动作。通过不同手势的组合,可以完成更复杂的操作。例如,可以通过组合手势来实现缩放、旋转、滑动等操作。组合手势可以提高用户交互的灵活性和效率。

GestureGroup(mode:GestureMode, ...gesture:GestureType[])
参数描述
mode必选参数,为GestureMode枚举类。用于声明该组合手势的类型。
gesture必选参数,为由多个手势组合而成的数组。用于声明组合成该组合手势的各个手势。

1.顺序识别

组合手势的顺序识别是指识别由多个手势组合而成的特定顺序的手势。在手势识别中,有些任务可能需要用户按照特定的顺序执行一系列手势才能触发某种操作或功能。例如,可以定义一个组合手势,要求用户首先做一个向左滑动,然后再做一个向上滑动,最后做一个点击动作才能执行某项操作。

组合手势的顺序识别可以应用于许多领域,如移动设备上的手势控制、虚拟现实、游戏等。它提供了更复杂和精确的用户交互方式,使得用户能够通过简单的手势组合来完成更多的操作或者控制。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Index {
  5. @State offsetX: number = 0;
  6. @State offsetY: number = 0;
  7. @State count: number = 0;
  8. @State positionX: number = 0;
  9. @State positionY: number = 0;
  10. @State borderStyles: BorderStyle = BorderStyle.Solid
  11. build() {
  12. Column() {
  13. Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
  14. .fontSize(28)
  15. }
  16. // 绑定translate属性可以实现组件的位置移动
  17. .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
  18. .height(250)
  19. .width(300)
  20. //以下组合手势为顺序识别,当长按手势事件未正常触发时不会触发拖动手势事件
  21. .gesture(
  22. // 声明该组合手势的类型为Sequence类型
  23. GestureGroup(GestureMode.Sequence,
  24. // 该组合手势第一个触发的手势为长按手势,且长按手势可多次响应
  25. LongPressGesture({ repeat: true })
  26. // 当长按手势识别成功,增加Text组件上显示的count次数
  27. .onAction((event: GestureEvent) => {
  28. if (event.repeat) {
  29. this.count++;
  30. }
  31. console.info('LongPress onAction');
  32. })
  33. .onActionEnd(() => {
  34. console.info('LongPress end');
  35. }),
  36. // 当长按之后进行拖动,PanGesture手势被触发
  37. PanGesture()
  38. .onActionStart(() => {
  39. this.borderStyles = BorderStyle.Dashed;
  40. console.info('pan start');
  41. })
  42. // 当该手势被触发时,根据回调获得拖动的距离,修改该组件的位移距离从而实现组件的移动
  43. .onActionUpdate((event: GestureEvent) => {
  44. this.offsetX = this.positionX + event.offsetX;
  45. this.offsetY = this.positionY + event.offsetY;
  46. console.info('pan update');
  47. })
  48. .onActionEnd(() => {
  49. this.positionX = this.offsetX;
  50. this.positionY = this.offsetY;
  51. this.borderStyles = BorderStyle.Solid;
  52. })
  53. )
  54. )
  55. }
  56. }

2.并行识别

组合手势的并行识别是指同时识别多个手势的能力。通常,组合手势是由多个基本手势组合而成的,例如在手机屏幕上的滑动、横扫或双击等。并行识别允许系统同时检测和识别多个手势,而不是一次只能识别一个手势。这样可以提高交互效率和用户体验,使用户能够更自由和灵活地操作设备。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Index {
  5. @State count1: number = 0;
  6. @State count2: number = 0;
  7. build() {
  8. Column() {
  9. Text('parallel gesture\n' + 'tapGesture count is 1:' + this.count1 + '\ntapGesture count is 2:' + this.count2 + '\n')
  10. .fontSize(28)
  11. }
  12. .height(200)
  13. .width(250)
  14. // 以下组合手势为并行并别,单击手势识别成功后,若在规定时间内再次点击,双击手势也会识别成功
  15. .gesture(
  16. GestureGroup(GestureMode.Parallel,
  17. TapGesture({ count: 1 })
  18. .onAction(() => {
  19. this.count1++;
  20. }),
  21. TapGesture({ count: 2 })
  22. .onAction(() => {
  23. this.count2++;
  24. })
  25. )
  26. )
  27. }
  28. }

3.互斥识别

组合手势互斥识别是指在多种手势操作同时发生时,系统通过识别这些手势的组合,来判断用户的意图并执行相应的操作。互斥识别是指系统能够判断两种或多种手势的组合是否冲突,如果冲突则只执行其中一种手势的操作,避免产生意料之外的结果或混乱。例如,在触摸屏设备上,用户同时进行滑动和放大手势操作时,系统可以通过互斥识别来判断用户是要进行滑动操作还是放大操作,并执行相应的操作。通过组合手势互斥识别,可以提高用户界面的交互性和操作的准确性。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Index {
  5. @State count1: number = 0;
  6. @State count2: number = 0;
  7. build() {
  8. Column() {
  9. Text('parallel gesture\n' + 'tapGesture count is 1:' + this.count1 + '\ntapGesture count is 2:' + this.count2 + '\n')
  10. .fontSize(28)
  11. }
  12. .height(200)
  13. .width(250)
  14. //以下组合手势为互斥并别,单击手势识别成功后,双击手势会识别失败
  15. .gesture(
  16. GestureGroup(GestureMode.Exclusive,
  17. TapGesture({ count: 1 })
  18. .onAction(() => {
  19. this.count1++;
  20. }),
  21. TapGesture({ count: 2 })
  22. .onAction(() => {
  23. this.count2++;
  24. })
  25. )
  26. )
  27. }
  28. }

在这里插入图片描述

 ?写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing?,不定期分享原创知识。
  • 想要获取个人更多完整鸿蒙最新VIP学习资料,请点击→全套鸿蒙HarmonyOS学习资料
  • 或者关注小编后私信回复【666】也可获取资料哦~~

最新鸿蒙Next全套学习资料请扫码
微信名片
注:本文转载自blog.csdn.net的蜀道山QAQ的文章"https://blog.csdn.net/shudaoshanQAQ/article/details/135461411"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2492) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

101
推荐
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2025 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top