前言
在上一篇文章中,我们介绍了三种给组件绑定手势的方式,以及 TapGesture 和 LongPressGesture 的使用,在本篇文章中,我们将继续介绍剩余的四种手势:
- PanGesture:滑动手势(最小距离触发)。
- PinchGesture:捏合手势。
- RotationGesture:旋转手势。
- SwipeGesture:滑动手势(最小速度触发)。
PanGesture
滑动手势可以配置的属性有以下的三个:
- fingers:触发滑动的最少手指数,默认值为1 ,取值范围是 1 到 10。
- direction:手势滑动的方向,支持逻辑与和逻辑或。
- All:所有方向。
- Horizontal:水平方向。
- Vertical:垂直方向。
- Left:向左滑动。
- Right:向右滑动。
- Up:向上滑动。
- Down:向下滑动。
- None:任何方向都不触发。
- distance:触发滑动手势的最小滑动距离,手写笔默认值:8,其余输入源默认值:5。
滑动手势的回调有下面的四种:
- onActionStart:滑动手势识别成功回调。
- onActionUpdate:滑动手势更新回调。
- onActionEnd:滑动手势结束回调。
- onActionCancel:滑动手势取消回调,不返回手势事件;onActionCancel(API 18+):滑动手势取消回调,返回手势事件;
下面通过示例代码来看下,PanGesture 是如何使用的:
less
Row() {}
.width('100%').height(60).backgroundColor('blue').parallelGesture(
PanGesture({fingers: 1, direction: PanDirection.Left}).onActionStart((event: GestureEvent) => {
console.log('触发了滑动事件');
}).onActionEnd((event: GestureEvent) => {
console.log('结束了滑动事件');
}).onActionUpdate((event: GestureEvent) => {
console.log('滑动事件更新');
}).onActionCancel(() => {
console.log('滑动事件取消');
})
)
上述代码给 Row
组件绑定了一个一只手指,向左方向触发滑动事件,当事件触发后,控制台会按照 onActionStart
-> onActionUpdate
(会随着更新一直输出) -> onActionEnd
的顺序输出日志。
PinchGesture
捏合手势可以配置的属性只有下面的两个:
- fingers:触发捏合手势的最少手指数,默认值为 2。
- distance:最小的识别距离,单位是 vp,默认值为 5。
捏合手势的回调有下面的四种:
- onActionStart:捏合手势识别成功回调。
- onActionUpdate:捏合手势更新回调。
- onActionEnd:捏合手势结束回调。
- onActionCancel:捏合手势取消回调,不返回手势事件;onActionCancel(API 18+):捏合手势取消回调,返回手势事件;
示例代码如下:
less
struct Index {
@State scaleValue: number = 1;
@State pinchValue: number = 1;
@State pinchX: number = 0;
@State pinchY: number = 0;
build() {
Column() {
Row() {}
.height(200)
.width(300)
.padding(20)
.border({ width: 3 })
.margin({ top: 100 })
.scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
.gesture(
PinchGesture({ fingers: 2 })
.onActionStart((event: GestureEvent) => {
console.info('触发了捏合');
})
.onActionUpdate((event: GestureEvent) => {
console.info('触发了捏合移动');
})
.onActionEnd((event: GestureEvent) => {
this.pinchValue = this.scaleValue
console.info('捏合结束')
})
)
}
.height('100%')
.width('100%')
}
}
上述代码实现了通过两个手指来进行组件的缩放。
RotationGesture
旋转手势可以配置的属性也是只有两个:
- fingers:触发旋转手势的最少手指数,默认值为 2。
- angle:触发旋转手势最小的角度变化,单位是 deg,默认值为 1。
旋转手势的回调有下面的四种:
- onActionStart:旋转手势识别成功回调。
- onActionUpdate:旋转手势移动过程中回调。
- onActionEnd:旋转手势结束回调。
- onActionCancel:旋转手势取消回调,不返回手势事件;onActionCancel(API 18+):旋转手势取消回调,返回手势事件;
示例代码如下:
scss
struct Index {
@State angle: number = 0;
build() {
Column() {
Row() {}
.height(200)
.width(300)
.padding(20)
.border({ width: 3 })
.margin(80)
.rotate({ angle: this.angle })
.gesture(
RotationGesture()
.onActionStart((event: GestureEvent) => {
console.info('触发了旋转');
})
.onActionUpdate((event: GestureEvent) => {
console.info('触发了旋转移动');
})
.onActionEnd((event: GestureEvent) => {
console.info('旋转结束')
})
)
}
.height('100%')
.width('100%')
}
}
上述代码实现了通过双指来进行组件的旋转。
SwipeGesture
滑动手势可以配置的属性有以下的三个:
- fingers:触发滑动的最少手指数,默认值为1 ,取值范围是 1 到 10。
- direction:手势滑动的方向。
- All:所有方向。
- Horizontal:水平方向,手指滑动方向与x轴夹角小于45度时触发。
- Vertical:竖直方向,手指滑动方向与y轴夹角小于45度时触发。
- None:任何方向都不触发。
- speed:触发滑动手势的最小滑动速度,默认值 100vp/s。
它的触发事件回调只有一个:onAction。
示例代码如下:
scss
struct Index {
build() {
Column() {
Row() {}
.height(200)
.width(300)
.padding(20)
.border({ width: 3 })
.margin(80)
.gesture(
SwipeGesture({ direction: SwipeDirection.Horizontal, fingers: 1 })
.onAction((event: GestureEvent) => {
console.log('触发了滑动事件');
})
)
}
.height('100%')
.width('100%')
}
}
上述代码实现了组件的水平方向、一只手指触发的滑动事件。