当前位置：首页 > news >正文

ArkTS开发系列之事件（2.8.2手势事件）

news 2025/7/15 14:39:15

上篇回顾：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))})))

查看全文

http://www.lryc.cn/news/383427.html