最全鸿蒙HarmonyOS实战-ArkUI事件（组合手势）(5)，移动端页面开发

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

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.互斥识别

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

需要这份系统化的资料的朋友，可以戳这里获取