鸿蒙开发-UI-交互事件-手势事件-编程知识

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

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

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

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

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

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

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

文章目录

前言

一、绑定手势方法

1. gesture

2. priorityGesture

3. parallelGesture

二、单一手势

三、组合手势

1. 顺序识别

2. 并行识别

3. 互斥识别

总结

前言

上文学习鸿蒙开发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到子组件TextText('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到子组件TextText('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. 当有两次点击时，单击手势在第一次点击时即宣告识别成功，此时双击手势已经失败。即使在规定时间内进行了第二次点击，双击手势事件也不会进行响应，此时会触发单击手势事件的第二次识别成功。