上篇回顾:ArkTS开发系列之事件(2.8.1触屏、键鼠、焦点事件)
本篇内容:ArkTS开发系列之事件(2.8.2手势事件)
一、绑定手势方法
1. 常规手势绑定方法
Text('手势').fontSize(44)
.gesture(TapGesture().onAction((event) => {
console.error('event: ' + JSON.stringify(event))
}))
2. 带优先级的手势绑定方法
-
需要注意,子父组件绑定相同级别手势时,子组件优先响应,如果父组件绑定优先级手势方法,子组件为普通绑定手势方法,则父组件优先响应
.priorityGesture(TapGesture().onAction((event)=>{ console.error('parentGesture: ' + JSON.stringify(event)) }))
3. 并行手势绑定方法
-
当父组件绑定此手势方法时,父子组件可同时响应手势
.parallelGesture(TapGesture().onAction((event)=>{ console.error('parent event: ' + JSON.stringify(event)) }))
二、单一手势
1. 点击手势(tapGesture)
Text('手势').fontSize(44)
.gesture(TapGesture().onAction((event) => {
console.error('event: ' + JSON.stringify(event))
}))
2. 长按手势(longPressGesture)
LongPressGesture(value?:{fingers?:number; repeat?:boolean; duration?:number})
-
fingers :触发最少手指数,默认1
-
repeat 是否连续触发 默认false
-
duration 长按多久触发,默认500
Text('长按手势').fontSize(55)
.gesture(
LongPressGesture({fingers: 1, repeat: true, duration: 300})//fingers :触发最少手指数,默认1 repeat 是否连续触发 默认false duration 长按多久触发,默认500
.onAction(event=>{
console.error('longPress: ' + JSON.stringify(event))
})
)
3. 拖动手势(PanGesture)
PanGesture(value?:{ fingers?:number; direction?:PanDirection; distance?:number})
-
fingers: 触发手势最少手指数,默认1
-
direction:触发手势方向,默认值Pandirection.All
-
distance:触发手势的最少距离,单位为vp,默认5vp
-
有点类似于onTouch事件
Text('拖动手势').fontSize(44) .gesture( PanGesture() .onActionStart( event => { console.error('Pan start: ' + JSON.stringify(event)) } ) .onActionUpdate( event => { console.error('Pan update: ' + JSON.stringify(event)) } ) .onActionEnd( event => { console.error('Pan end: ' + JSON.stringify(event)) } ) .onActionCancel( () => { console.error('Pan cancel: ') } ) )
4. 撮合手势(PinchGesture)
PinchGesture(value?:{fingers?:number; distance?:number})
-
fingers: 触发手势最少手指数,默认2, 最大值为5
-
distance:触发手势的最少距离,单位为vp,默认5vp
Text('撮合手势').fontSize(44) .gesture( PinchGesture() .onActionStart( event => { console.error('Pinch start: ' + JSON.stringify(event)) } ) .onActionUpdate( event => { console.error('Pinch update: ' + JSON.stringify(event)) } ) .onActionEnd( event => { console.error('Pinch end: ' + JSON.stringify(event)) } ) .onActionCancel( () => { console.error('Pinch cancel: ') } ) )
5. 旋转手势(RotationGesture)
RotationGesture(value?:{fingers?:number; angle?:number})
-
fingers: 触发手势最少手指数,默认2, 最大值为5
-
angle: 触发手势的最小改变度数,单位是deg,默认为1deg
Text().fontSize(44)
.gesture(
RotationGesture({fingers:2})
.onActionStart(
event => {
console.error('Rotation start: ' + JSON.stringify(event))
}
)
.onActionUpdate(
event => {
console.error('Rotation update: ' + JSON.stringify(event))
}
)
.onActionEnd(
event => {
console.error('Rotation end: ' + JSON.stringify(event))
}
)
.onActionCancel(
() => {
console.error('Rotation cancel: ')
}
)
)
6. 滑动手势(SwipeGesture)
SwipeGesture(value?:{fingers?:number; direction?:SwipeDirection; speed?:number})
-
fingers: 触发手势最少手指数,默认1, 最大值为10
-
direction: 触发手势的方向默认值是 SwipeDirection.All
-
speed: 触发手势的最小滑动速度,单位为vp/s,默认值为100vp/s
.gesture( SwipeGesture({ direction: SwipeDirection.Vertical }) .onAction(event => { console.error('Swipe : ' + JSON.stringify(event)) }) )
三、组合手势
GestureGroup(mode:GestureMode, ...gesture:GestureType[])
mode: 声明组合手势的类型
gesture: 手势数组
1. 顺序组合
.gesture(
GestureGroup(GestureMode.Sequence,
SwipeGesture({ direction: SwipeDirection.Vertical })
.onAction(event => {
console.error('Swipe : ' + JSON.stringify(event))
}),
LongPressGesture()
.onAction(event => {
console.error('longPress : ' + JSON.stringify(event))
})
)
)
2. 并行组合
.gesture(
GestureGroup(GestureMode.Parallel,
SwipeGesture({ direction: SwipeDirection.Vertical })
.onAction(event => {
console.error('Swipe : ' + JSON.stringify(event))
}),
LongPressGesture()
.onAction(event => {
console.error('longPress : ' + JSON.stringify(event))
})
)
)
3. 互斥组合
.gesture(
GestureGroup(GestureMode.Exclusive,
SwipeGesture({ direction: SwipeDirection.Vertical })
.onAction(event => {
console.error('Swipe : ' + JSON.stringify(event))
}),
LongPressGesture()
.onAction(event => {
console.error('longPress : ' + JSON.stringify(event))
})
)
)