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))
          })
      )
    )
相关推荐
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
天涯倦客的美丽人生6 小时前
2024年11月最新版Adobe PhotoShop(26.0)中文版下载
ui·adobe·photoshop
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js