ArkTS开发系列之事件(2.8.2手势事件)

上篇回顾: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))
          })
      )
    )
相关推荐
gqkmiss32 分钟前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247553 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255023 小时前
前端常用算法集合
前端·算法
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203984 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2344 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1235 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~5 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语5 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport5 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap