鸿蒙开发-UI-交互事件-手势事件

最新推荐文章于 2024-05-19 21:37:57 发布

鸿蒙布道

最新推荐文章于 2024-05-19 21:37:57 发布

阅读量1.2k

点赞数 23

分类专栏：鸿蒙开发文章标签： harmonyos ui 华为

本文链接：https://blog.csdn.net/u013488266/article/details/137070170

版权

鸿蒙开发专栏收录该内容

42 篇文章 6 订阅

订阅专栏

鸿蒙开发-UI-图形-绘制自定义图形

鸿蒙开发-UI-图形-页面内动画

鸿蒙开发-UI-图形-组件内转场动画

鸿蒙开发-UI-图形-弹簧曲线动画

鸿蒙开发-UI-交互事件-通用事件

鸿蒙开发-UI-交互事件-键鼠事件

鸿蒙开发-UI-交互事件-焦点事件

文章目录

前言

上文学习鸿蒙开发UI交互焦点事件，了解焦点、获焦、失焦、走焦等相关概念，详细学习了走焦的相关规则，以及设置组件是否获焦的接口，最后学习了自定义TAB键的走焦顺序，本文将学习手势事件。

一、绑定手势方法

通过给各个组件绑定不同的手势事件，并设计事件的响应方式，当手势识别成功时，ArkUI框架将通过事件回调通知组件手势识别的结果。

1. gesture

通用的一种手势绑定方法，可以将手势绑定到对应的组件上

接口

.gesture(gesture: GestureType, mask?: GestureMask)

代码示例

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Gesture').fontSize(28)
//step1： 采用gesture手势绑定方法绑定点击手势TapGesture到Text组件上
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
  }
}

2. priorityGesture

带优先级的手势绑定方法，可以在组件上绑定优先识别的手势。当父组件和子组件使用gesture绑定同类型的手势时，子组件优先识别通过gesture绑定的手势。当父组件使用priorityGesture绑定与子组件同类型的手势时，父组件优先识别通过priorityGesture绑定的手势。

接口

.priorityGesture(gesture: GestureType, mask?: GestureMask)。

代码示例

@Entry
@Component
struct Index {
  build() {
    Column() {
//step1：采用gesture手势绑定方法绑定点击手势TapGesture到子组件Text
      Text('Gesture').fontSize(28)
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('Text TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
//step2：采用priorityGesture手势绑定方法绑定点击手势TapGesture到父组件Column，点击文本区域会忽略Text组件的TapGesture手势事件，优先响应父组件Column的TapGesture手势事件
    .priorityGesture(
      TapGesture()
        .onAction(() => {
          console.info('Column TapGesture is onAction');
        }), GestureMask.IgnoreInternal)
  }
}

3. parallelGesture

并行的手势绑定方法，可以在父子组件上绑定可以同时响应的相同手势。默认情况手势事件为非冒泡事件，当父子组件绑定相同的手势时，最多只有一个组件的手势事件能够获得响应。当父组件绑定了并行手势parallelGesture时，父子组件相同的手势事件都可以触发，实现类似冒泡效果。

接口

.parallelGesture(gesture: GestureType, mask?: GestureMask)

代码示例

@Entry
@Component
struct Index {
  build() {
    Column() {
//step1：采用gesture手势绑定方法绑定点击手势TapGesture到子组件Text
      Text('Gesture').fontSize(28)
        .gesture(
          TapGesture()
            .onAction(() => {
              console.info('Text TapGesture is onAction');
            }))
    }
    .height(200)
    .width(250)
//step2：采用parallelGesture手势绑定方法绑定点击手势TapGesture到父组件Column，点击文本区域会同时响应父组件Column和子组件Text的TapGesture手势事件
    .parallelGesture(
      TapGesture()
        .onAction(() => {
          console.info('Column TapGesture is onAction');
        }), GestureMask.IgnoreInternal)
  }
}

注：当父组件和子组件同时绑定单击手势事件和双击手势事件时，父组件和子组件均只响应单击手势事件

二、单一手势

三、组合手势

组合手势由多种单一手势组合而成，通过在GestureGroup中使用不同的GestureMode来声明该组合手势的类型

接口

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

1. 顺序识别

GestureMode为Sequence。顺序识别组合手势将按照手势的注册顺序识别手势，直到所有的手势识别成功。当顺序识别组合手势中有一个手势识别失败时，所有的手势识别失败。

2. 并行识别

GestureMode为Parallel。并行识别组合手势中注册的手势将同时进行识别，直到所有手势识别结束。并行识别手势组合中的手势进行识别时互不影响。

代码示例

@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)
//step1：定义组合手势为并行并别，单击手势识别成功后，若在规定时间内再次点击，双击手势也会识别成功
    .gesture(
      GestureGroup(GestureMode.Parallel,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.count1++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.count2++;
          })
      )
    )
  }
}

注：

1. 当由单击手势和双击手势组成一个并行识别组合手势后，在区域内进行点击时，单击手势和双击手势将同时进行识别。

2. 当只有单次点击时，单击手势识别成功，双击手势识别失败。

3. 当有两次点击时，若两次点击相距时间在规定时间内（默认规定时间为300毫秒），触发两次单击事件和一次双击事件。

4. 当有两次点击时，若两次点击相距时间超出规定时间，触发两次单击事件不触发双击事件。

3. 互斥识别

GestureMode为Exclusive。互斥识别组合手势中注册的手势将同时进行识别，若有一个手势识别成功，则结束手势识别，其他所有手势识别失败。

代码示例

@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)
//step1：定义组合手势为互斥并别，单击手势识别成功后，双击手势会识别失败
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.count1++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.count2++;
          })
      )
    )
  }
}

注：

1. 当由单击手势和双击手势组成一个互斥识别组合手势后，在区域内进行点击时，单击手势和双击手势将同时进行识别。

2. 当只有单次点击时，单击手势识别成功，双击手势识别失败。

3. 当有两次点击时，单击手势在第一次点击时即宣告识别成功，此时双击手势已经失败。即使在规定时间内进行了第二次点击，双击手势事件也不会进行响应，此时会触发单击手势事件的第二次识别成功。

总结

本文学习手势事件，学习绑定手势的三种方法，以及单一手势和组合手势的使用方法，下文将学习鸿蒙开发web相关的知识。

鸿蒙布道

关注

23
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙开发-UI-交互事件-手势事件

上文学习鸿蒙开发UI交互焦点事件，了解焦点、获焦、失焦、走焦等相关概念，详细学习了走焦的相关规则，以及设置组件是否获焦的接口，最后学习了自定义TAB键的走焦顺序，本文将学习手势事件。本文学习手势事件，学习绑定手势的三种方法，以及单一手势和组合手势的使用方法，下文将学习鸿蒙开发web相关的知识。
复制链接

扫一扫