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

harmonyos,arkui · 浏览次数 : 0

小编点评

**组合手势应用程序的手势操作** **顺序识别** * 通过不同手势的组合,可以完成更复杂的操作,例如缩放、旋转、滑动等。 * 声明该组合手势的类型为 Sequence 类型,并设置多个手势的顺序。 * 当长按手势识别成功时,增加Text组件上显示的count次数。 **并行识别** * 通过同时识别多个手势,可以提高交互效率和用户体验。 * 声明该组合手势为 Parallel 类型,并设置多个手势的监听器。 * 当两个手势被识别成功时,只执行其中一种手势的操作。 **互斥识别** * 通过识别手势的组合,可以提高用户界面的交互性和操作的准确性。 * 声明该组合手势为 Exclusive 类型,并设置多个手势的监听器。 * 当两个手势被识别成功时,只执行其中一种手势的操作。

正文

🚀一、组合手势

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

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

image

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

GestureGroup(mode:GestureMode, ...gesture:GestureType[])

image

🔎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;
          })
      )
    )
  }
}

image

🔎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++;
          })
      )
    )
  }
}

image

🔎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++;
          })
      )
    )
  }
}

image

🚀写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY

image

与鸿蒙HarmonyOS实战-ArkUI事件(组合手势)相似的内容:

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

一、组合手势 应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。 HarmonyOS中常见的手势操作及其功能: 组合手势是由多个手势组合而成的手势动作。通过不同手势的组合,可以完成更复杂的操作。例如,

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

一、组合手势 应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。 HarmonyOS中常见的手势操作及其功能: 组合手势是由多个手势组合而成的手势动作。通过不同手势的组合,可以完成更复杂的操作。例如,

鸿蒙HarmonyOS实战-ArkUI事件(单一手势)

一、单一手势 应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。 HarmonyOS中常见的手势操作及其功能: 1.点击手势(TapGesture) 点击手势(TapGesture)是指用户在触摸

鸿蒙HarmonyOS实战-ArkUI事件(手势方法)

一、手势方法 应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。 HarmonyOS中常见的手势操作及其功能: 1.gesture(常规手势绑定方法) 接口说明: .gesture(gesture

鸿蒙HarmonyOS实战-ArkUI事件(焦点事件)

前言 焦点事件是指程序中的重要事件或关键点。焦点事件通常是程序的核心逻辑和功能,需要引起特殊的关注和处理。 在图形用户界面(GUI)编程中,焦点事件通常与用户交互和界面输入相关。例如,当用户点击按钮、输入文本或选择菜单项时,这些操作会触发相应的焦点事件。程序需要捕获这些焦点事件并进行处理,以执行

鸿蒙HarmonyOS实战-ArkUI事件(键鼠事件)

前言 键鼠事件是指在计算机操作中,用户通过键盘和鼠标来与计算机进行交互的行为。常见的键鼠事件包括按下键盘上的键、移动鼠标、点击鼠标左键或右键等等。键鼠事件可以触发许多不同的操作,比如在文本编辑器中输入文字、在游戏中移动角色、在网页上点击链接等等。计算机操作系统和应用程序可以通过监听键鼠事件来响应

鸿蒙HarmonyOS实战-ArkUI事件(触屏事件)

前言 触屏事件是指通过触摸屏幕来进行操作和交互的事件。常见的触屏事件包括点击(tap)、双击(double tap)、长按(long press)、滑动(swipe)、拖动(drag)等。触屏事件通常用于移动设备和平板电脑等具有触摸屏幕的设备上,用户可以通过触摸屏幕上的不同区域或者以不同的方式进

鸿蒙HarmonyOS实战-ArkUI动画(页面转场动画)

前言 页面转场动画是指在应用程序中,当用户导航到另一个页面时,使用动画效果来过渡页面之间的切换。这样做的目的是为了提升用户体验,使页面之间的切换更加平滑和有趣。 常见的页面转场动画包括淡入淡出、滑动、翻转、缩放等效果。通过使用这些动画效果,可以给用户一种流畅的感觉,让页面之间的切换更加自然。 在

鸿蒙HarmonyOS实战-ArkUI动画(放大缩小视图)

前言 在HarmonyOS中,可以通过以下方法放大缩小视图: 使用缩放手势:可以使用双指捏合手势来放大缩小视图。将两个手指放在屏幕上,并向内或向外移动手指,即可进行放大或缩小操作。 使用系统提供的缩放控件:在HarmonyOS的开发中,可以使用系统提供的缩放控件来实现视图的放大缩小功能。通过在布

鸿蒙HarmonyOS实战-ArkUI组件(Canvas)

一、Canvas Canvas组件是一种图形渲染组件,它提供了一个画布(canvas),开发者可以在上面绘制各种图形、文本等。Canvas组件通常用于创建游戏、数据可视化等需要动态绘制图形的应用程序。 Canvas组件提供了多个API,开发者可以使用这些API进行绘制操作。常用的API包括绘制矩