【愚公系列】2023年12月 HarmonyOS教学课程 040-ArkUI事件(组合手势)

举报
愚公搬代码 发表于 2023/12/31 19:47:13 2023/12/31
【摘要】 🏆 作者简介,愚公搬代码🏆《头衔》:华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,51CTO博客专家等。🏆《近期荣誉》:2023年华为云十佳博主,2022年CSDN博客之星TOP2,2022年华为云十佳博主等。🏆《博客内容》:.NET、Java、...

🏆 作者简介,愚公搬代码
🏆《头衔》:华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,51CTO博客专家等。
🏆《近期荣誉》:2023年华为云十佳博主,2022年CSDN博客之星TOP2,2022年华为云十佳博主等。
🏆《博客内容》:.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀一、组合手势

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

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

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

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

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

🔎1.顺序识别

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

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

// xxx.ets
@Entry
@Component
struct Index {
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State count: number = 0;
  @State positionX: number = 0;
  @State positionY: number = 0;
  @State borderStyles: BorderStyle = BorderStyle.Solid

  build() {
    Column() {
      Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
        .fontSize(28)
    }
    // 绑定translate属性可以实现组件的位置移动
    .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
    .height(250)
    .width(300)
    //以下组合手势为顺序识别,当长按手势事件未正常触发时不会触发拖动手势事件
    .gesture(
      // 声明该组合手势的类型为Sequence类型
      GestureGroup(GestureMode.Sequence,
        // 该组合手势第一个触发的手势为长按手势,且长按手势可多次响应
        LongPressGesture({ repeat: true })
          // 当长按手势识别成功,增加Text组件上显示的count次数
          .onAction((event: GestureEvent) => {
            if (event.repeat) {
              this.count++;
            }
            console.info('LongPress onAction');
          })
          .onActionEnd(() => {
            console.info('LongPress end');
          }),
        // 当长按之后进行拖动,PanGesture手势被触发
        PanGesture()
          .onActionStart(() => {
            this.borderStyles = BorderStyle.Dashed;
            console.info('pan start');
          })
            // 当该手势被触发时,根据回调获得拖动的距离,修改该组件的位移距离从而实现组件的移动
          .onActionUpdate((event: GestureEvent) => {
            this.offsetX = this.positionX + event.offsetX;
            this.offsetY = this.positionY + event.offsetY;
            console.info('pan update');
          })
          .onActionEnd(() => {
            this.positionX = this.offsetX;
            this.positionY = this.offsetY;
            this.borderStyles = BorderStyle.Solid;
          })
      )
    )
  }
}

在这里插入图片描述

🔎2.并行识别

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

// xxx.ets
@Entry
@Component
struct Index {
  @State count1: number = 0;
  @State count2: number = 0;

  build() {
    Column() {
      Text('parallel gesture\n' + 'tapGesture count is 1:' + this.count1 + '\ntapGesture count is 2:' + this.count2 + '\n')
        .fontSize(28)
    }
    .height(200)
    .width(250)
    // 以下组合手势为并行并别,单击手势识别成功后,若在规定时间内再次点击,双击手势也会识别成功
    .gesture(
      GestureGroup(GestureMode.Parallel,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.count1++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.count2++;
          })
      )
    )
  }
}

在这里插入图片描述

🔎3.互斥识别

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

// xxx.ets
@Entry
@Component
struct Index {
  @State count1: number = 0;
  @State count2: number = 0;

  build() {
    Column() {
      Text('parallel gesture\n' + 'tapGesture count is 1:' + this.count1 + '\ntapGesture count is 2:' + this.count2 + '\n')
        .fontSize(28)
    }
    .height(200)
    .width(250)
    //以下组合手势为互斥并别,单击手势识别成功后,双击手势会识别失败
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.count1++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.count2++;
          })
      )
    )
  }
}

在这里插入图片描述


🚀感谢:给读者的一封信

亲爱的读者,

我在这篇文章中投入了大量的心血和时间,希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验,我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助,我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担,但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章,是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命,也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作,请扫描下面二维码,您的支持将不胜感激。同时,如果您有任何反馈或建议,也欢迎与我分享。

在这里插入图片描述

再次感谢您的阅读和支持!

最诚挚的问候, “愚公搬代码”

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。