codecamp

组合手势

手势识别组合,即多种手势组合为复合手势,支持连续识别、并行识别和互斥识别。

说明

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

接口

GestureGroup(mode: GestureMode, ...gesture: GestureType[])

  • 参数

    参数名

    参数类型

    必填

    默认值

    参数描述

    mode

    GestureMode

    -

    设置组合手势识别模式。

    gesture

    TapGesture

    LongPressGesture

    PanGesture

    PinchGesture

    RotationGesture

    -

    设置1个或者多个基础手势类型时,这些手势会被识别为组合手势。若此参数不填则组合手势识别功能不生效。

    说明:

    当需要为一个组件同时添加单击和双击手势时,可在组合手势中添加两个TapGesture,需要双击手势在前,单击手势在后,否则不生效。

GestureMode枚举说明

名称

描述

Sequence

顺序识别,按照手势的注册顺序识别手势,直到所有手势识别成功。若有一个手势识别失败,后续手势识别均失败。

Parallel

并发识别,注册的手势同时识别,直到所有手势识别结束,手势识别互相不影响。

Exclusive

互斥识别,注册的手势同时识别,若有一个手势识别成功,则结束手势识别。

事件

名称

功能描述

onCancel(event: () => void)

顺序组合手势(GestureMode.Sequence)取消后触发回调。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct GestureGroupExample {
  5. @State count: number = 0
  6. @State offsetX: number = 0
  7. @State offsetY: number = 0
  8. @State positionX: number = 0
  9. @State positionY: number = 0
  10. @State borderStyles: BorderStyle = BorderStyle.Solid
  11. build() {
  12. Column() {
  13. Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
  14. .fontSize(15)
  15. }
  16. .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
  17. .height(150)
  18. .width(200)
  19. .padding(20)
  20. .margin(20)
  21. .border({ width: 3, style: this.borderStyles })
  22. .gesture(
  23. // 以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件
  24. GestureGroup(GestureMode.Sequence,
  25. LongPressGesture({ repeat: true })
  26. .onAction((event: GestureEvent) => {
  27. if (event.repeat) {
  28. this.count++
  29. }
  30. console.info('LongPress onAction')
  31. })
  32. .onActionEnd(() => {
  33. console.info('LongPress end')
  34. }),
  35. PanGesture()
  36. .onActionStart(() => {
  37. this.borderStyles = BorderStyle.Dashed
  38. console.info('pan start')
  39. })
  40. .onActionUpdate((event: GestureEvent) => {
  41. this.offsetX = this.positionX + event.offsetX
  42. this.offsetY = this.positionY + event.offsetY
  43. console.info('pan update')
  44. })
  45. .onActionEnd(() => {
  46. this.positionX = this.offsetX
  47. this.positionY = this.offsetY
  48. this.borderStyles = BorderStyle.Solid
  49. console.info('pan end')
  50. })
  51. )
  52. .onCancel(() => {
  53. console.info('sequence gesture canceled')
  54. })
  55. )
  56. }
  57. }

示意图:

按顺序首先触发长按事件:

按顺序首先触发长按事件,长按事件识别结束之后,其次触发拖动事件,向右下方拖动:

触发滑动事件
字幕排序定位
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

媒体组件

像素

枚举

类型

接口

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }