결합된 제스처는 여러 개의 단일 제스처로 구성되며 GestureGroup에서 서로 다른 GestureMode를 사용하여 결합된 제스처의 유형을 선언함으로써 연속 인식, 병렬 인식 및 상호 배타적 인식의 세 가지 유형을 지원합니다.
.GestureGroup(mode:GestureMode, …gesture:GestureType[])
모드: GestureMode 열거형 클래스인 필수 매개 변수입니다. 이 결합된 동작의 유형을 선언하는 데 사용됩니다.
제스처: 필수 매개변수로, 여러 제스처로 구성된 배열입니다. 결합된 동작으로 결합되는 개별 동작을 선언하는 데 사용됩니다.
연속 인식 조합 제스처에 해당하는 GestureMode는 Sequence이다. 결합된 제스처를 지속적으로 인식하면 모든 제스처가 성공적으로 인식될 때까지 등록된 순서대로 제스처를 인식합니다. 연속 인식 조합 제스처에서 하나의 제스처 인식이 실패하면 모든 제스처 인식이 실패합니다.
길게 누르기 동작과 드래그 동작으로 구성된 연속 동작을 예로 들어 보겠습니다.
번역 속성은 Column 구성 요소에 바인딩되어 있으며 이 속성을 수정하여 구성 요소의 위치 및 이동을 설정할 수 있습니다. 그런 다음 LongPressGesture와 PanGesture로 구성된 Sequence 조합 제스처를 구성 요소에 바인딩합니다. LongPressGesture가 트리거되면 표시된 숫자를 업데이트합니다. 길게 누른 후 드래그하면 드래그 동작의 콜백 기능에 따라 컴포넌트가 드래그됩니다.
// 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;
})
)
)
}
}
설명 : 드래그 이벤트는 일반적인 연속 인식 조합 제스처 이벤트로 길게 누르기 제스처 이벤트와 슬라이딩 제스처 이벤트로 구성된다. 드래그 이벤트는 길게 누르기 동작 이벤트의 미리 설정된 시간 동안 길게 누른 후 슬라이딩해야 발생합니다. 길게 누르기 이벤트에 도달하지 않거나 길게 누른 후 슬라이딩이 수행되지 않으면 드래그 이벤트가 인식되지 않습니다.