鸿蒙手势交互(三:组合手势)

三、组合手势

由多种单一手势组合而成,通过在GestureGroup中使用不同的GestureMode来声明该组合手势的类型,支持顺序识别、并行识别和互斥识别三种类型。

ts 复制代码
GestureGroup(mode:GestureMode, gesture:GestureType[])
//- mode:为GestureMode枚举类。用于声明该组合手势的类型。
    
//- gesture:由多个手势组合而成的数组。用于声明组合成该组合手势的各个手势。
  1. 顺序识别 顺序识别组合手势对应的GestureMode为Sequence
ts 复制代码
//- 手势将按照手势的注册顺序识别手势,直到所有的手势识别成功。
//- 当顺序识别组合手势中有一个手势识别失败时,后续手势识别均失败。
//- 顺序识别手势组仅有最后一个手势可以响应onActionEnd。

// 这里拖拽事件是一种典型的顺序识别组合手势事件,由长按手势事件和滑动手势事件组合而成
@Entry
@Component
struct Index {
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State count: number = 0;
  @State positionX: number = 0;
  @State positionY: number = 0;
  @State borderStyles: BorderStyle = BorderStyle.Solid

  build() {
    Column() {
      Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
        .fontSize(28)
    }.margin(10)
    .borderWidth(1)
    // 绑定translate属性可以实现组件的位置移动
    .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
    .height(250)
    .width(300)
    //以下组合手势为顺序识别,当长按手势事件未正常触发时不会触发拖动手势事件
    .gesture(
      // 声明该组合手势的类型为Sequence类型
      GestureGroup(GestureMode.Sequence,
        // 该组合手势第一个触发的手势为长按手势,且长按手势可多次响应
        LongPressGesture({ repeat: true })
          // 当长按手势识别成功,增加Text组件上显示的count次数
          .onAction((event: GestureEvent|undefined) => {
            if(event){
              if (event.repeat) {
                this.count++;
              }
            }
            console.info('LongPress onAction');
          })
          .onActionEnd(() => {
            console.info('LongPress end');
          }),
        // 当长按之后进行拖动,PanGesture手势被触发
        PanGesture()
          .onActionStart(() => {
            this.borderStyles = BorderStyle.Dashed;
            console.info('pan start');
          })
            // 当该手势被触发时,根据回调获得拖动的距离,修改该组件的位移距离从而实现组件的移动
          .onActionUpdate((event: GestureEvent|undefined) => {
            if(event){
              this.offsetX = (this.positionX + event.offsetX);
              this.offsetY = this.positionY + event.offsetY;
            }
            console.info('pan update');
          })
          .onActionEnd(() => {
            this.positionX = this.offsetX;
            this.positionY = this.offsetY;
            this.borderStyles = BorderStyle.Solid;
          })
      )
      .onCancel(() => {
        console.log("sequence gesture canceled")
      })
    )
  }
}
  1. 并行识别 并行识别组合手势对应的GestureMode为Parallel
ts 复制代码
//- 并行识别组合手势中注册的手势将同时进行识别,直到所有手势识别结束。
//- 并行识别手势组合中的手势进行识别时互不影响。

// 在一个Column组件上绑定点击手势和双击手势组成的并行识别手势
@Entry
@Component
struct Index {
  @State count1: number = 0;
  @State count2: number = 0;

  build() {
    Column() {
      Text('Parallel gesture\n' + 'tapGesture count is 1:' + this.count1 + '\ntapGesture count is 2:' + this.count2 + '\n')
        .fontSize(28)
    }
    .height(200)
    .width('100%')
    // 以下组合手势为并行并别,单击手势识别成功后,若在规定时间内再次点击,双击手势也会识别成功
    .gesture(
      GestureGroup(GestureMode.Parallel,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.count1++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.count2++;
          })
      )
    )
  }
}
  1. 互斥识别 互斥识别组合手势对应的GestureMode为Exclusive
ts 复制代码
//- 互斥识别组合手势中注册的手势将同时进行识别,若有一个手势识别成功,则结束手势识别,其他所有手势识别失败。

// 在一个Column组件上绑定单击手势和双击手势组合而成的互斥识别组合手势
@Entry
@Component
struct Index {
  @State count1: number = 0;
  @State count2: number = 0;

  build() {
    Column() {
      Text('Exclusive gesture\n' + 'tapGesture count is 1:' + this.count1 + '\ntapGesture count is 2:' + this.count2 + '\n')
        .fontSize(28)
    }
    .height(200)
    .width('100%')
    //以下组合手势为互斥并别,单击手势识别成功后,双击手势会识别失败
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        TapGesture({ count: 1 })
          .onAction(() => {
            this.count1++;
          }),
        TapGesture({ count: 2 })
          .onAction(() => {
            this.count2++;
          })
      )
    )
  }
}
相关推荐
蓝冰印9 小时前
HarmonyOS Next 项目完整学习指南
华为·harmonyos
爱笑的眼睛1117 小时前
我的HarmonyOS百宝箱
华为·harmonyos
2501_9197490317 小时前
鸿蒙:创建公共事件、订阅公共事件和退订公共事件
华为·harmonyos
我是华为OD~HR~栗栗呀18 小时前
华为od-21届考研-C++面经
java·c语言·c++·python·华为od·华为·面试
安防视频中间件/视频资源汇聚平台19 小时前
华为结构化摄像机接入到SVMSPro平台操作流程
华为·信息可视化·实时音视频·svmspro
颜颜yan_21 小时前
HarmonyOS 6 ArkUI框架实战:文本展开折叠组件开发详解
华为·harmonyos·arkui
Industio_触觉智能1 天前
开源鸿蒙6.1和8.1版本被确定为LTS建议版本,最新路标正式发布!-转自开源鸿蒙OpenHarmony社区
harmonyos·openharmony·开源鸿蒙
●VON1 天前
重生之我在大学自学鸿蒙开发第五天-《实战篇》
学习·华为·云原生·harmonyos·鸿蒙
饮马长城窟1 天前
华为Asend NPU 大模型W8A8量化调优
华为
文火冰糖的硅基工坊1 天前
[嵌入式系统-114]:华为的操作系统:鸿蒙操作系统(HarmonyOS)和欧拉操作系统(openEuler)
科技·华为·架构·harmonyos