鸿蒙手势交互(三：组合手势)
三、组合手势
由多种单一手势组合而成，通过在GestureGroup中使用不同的GestureMode来声明该组合手势的类型，支持顺序识别、并行识别和互斥识别三种类型。
GestureGroup(mode:GestureMode, gesture:GestureType[])
//- mode：为GestureMode枚举类。用于声明该组合手势的类型。
//- gesture：由多个手势组合而成的数组。用于声明组合成该组合手势的各个手势。
- 顺序识别 顺序识别组合手势对应的GestureMode为Sequence
//- 手势将按照手势的注册顺序识别手势，直到所有的手势识别成功。
//- 当顺序识别组合手势中有一个手势识别失败时，后续手势识别均失败。
//- 顺序识别手势组仅有最后一个手势可以响应onActionEnd。
// 这里拖拽事件是一种典型的顺序识别组合手势事件，由长按手势事件和滑动手势事件组合而成
@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)
}.margin(10)
.borderWidth(1)
// 绑定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|undefined) => {
if(event){
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|undefined) => {
if(event){
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;
})
)
.onCancel(() => {
console.log("sequence gesture canceled")
})
)
}
}
- 并行识别 并行识别组合手势对应的GestureMode为Parallel
//- 并行识别组合手势中注册的手势将同时进行识别，直到所有手势识别结束。
//- 并行识别手势组合中的手势进行识别时互不影响。
// 在一个Column组件上绑定点击手势和双击手势组成的并行识别手势
@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('100%')
// 以下组合手势为并行并别，单击手势识别成功后，若在规定时间内再次点击，双击手势也会识别成功
.gesture(
GestureGroup(GestureMode.Parallel,
TapGesture({ count: 1 })
.onAction(() => {
this.count1++;
}),
TapGesture({ count: 2 })
.onAction(() => {
this.count2++;
})
)
)
}
}
- 互斥识别 互斥识别组合手势对应的GestureMode为Exclusive
//- 互斥识别组合手势中注册的手势将同时进行识别，若有一个手势识别成功，则结束手势识别，其他所有手势识别失败。
// 在一个Column组件上绑定单击手势和双击手势组合而成的互斥识别组合手势
@Entry
@Component
struct Index {
@State count1: number = 0;
@State count2: number = 0;
build() {
Column() {
Text('Exclusive gesture\n' + 'tapGesture count is 1:' + this.count1 + '\ntapGesture count is 2:' + this.count2 + '\n')
.fontSize(28)
}
.height(200)
.width('100%')
//以下组合手势为互斥并别，单击手势识别成功后，双击手势会识别失败
.gesture(
GestureGroup(GestureMode.Exclusive,
TapGesture({ count: 1 })
.onAction(() => {
this.count1++;
}),
TapGesture({ count: 2 })
.onAction(() => {
this.count2++;
})
)
)
}
}
原文地址：https://blog.csdn.net/MuZiChunChun/article/details/142388323
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！