首页 > 其他分享 >HarmonyOS/OpenHarmony(Stage模型)应用开发组合手势(一)连续识别

HarmonyOS/OpenHarmony(Stage模型)应用开发组合手势(一)连续识别

时间:2023-09-07 15:32:16浏览次数:50  
标签:OpenHarmony 组合 拖动 HarmonyOS State 组件 识别 手势 Stage

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

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

mode:必选参数,为GestureMode枚举类。用于声明该组合手势的类型。

gesture:必选参数,为由多个手势组合而成的数组。用于声明组合成该组合手势的各个手势。

连续识别组合手势对应的GestureMode为Sequence。连续识别组合手势将按照手势的注册顺序识别手势,直到所有的手势识别成功。当连续识别组合手势中有一个手势识别失败时,所有的手势识别失败。

以一个由长按手势和拖动手势组合而成的连续手势为例:

在一个Column组件上绑定了translate属性,通过修改该属性可以设置组件的位置移动。然后在该组件上绑定LongPressGesture和PanGesture组合而成的Sequence组合手势。当触发LongPressGesture时,更新显示的数字。当长按后进行拖动时,根据拖动手势的回调函数,实现组件的拖动。

// xxx.ets
@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)
    }
    // 绑定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) => {
            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) => {
            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;
          })
      )
    )
  }
}

HarmonyOS/OpenHarmony(Stage模型)应用开发组合手势(一)连续识别_长按手势

说明:拖拽事件是一种典型的连续识别组合手势事件,由长按手势事件和滑动手势事件组合而成。只有先长按达到长按手势事件预设置的时间后进行滑动才会触发拖拽事件。如果长按事件未达到或者长按后未进行滑动,拖拽事件均识别失败。

标签:OpenHarmony,组合,拖动,HarmonyOS,State,组件,识别,手势,Stage
From: https://blog.51cto.com/u_14946066/7397684

相关文章

  • OpenHarmony南向开发培训第四次作业(D9案例数据上云)
    首先,要实现Bearpi(Hi3861)的数据上云,我们要先了解bearpi的上云案例是怎么运行的这里我选取的是D9_iot_cloud_oc_manhole_cover这个案例那么既然是上云,我们肯定要先链接平台,而在案例里链接平台的函数是staticintCloudMainTaskEntry(void)你就记住你什都不用改,要改什么会在文章最后......
  • OpenHarmony应用开发之自定义弹窗
     本文转载自《OpenHarmony应用开发之自定义弹窗》,作者:zhushangyuan_应用场景在应用的使用和开发中,弹窗是一个很常见的场景,自定义弹窗又因为极高的自由度得以广泛应用。本文以橘子购物中一个应用更新提示的弹窗介绍OpenHarmony的自定义弹窗。 接口自定义弹窗官方文档:自定......
  • OpenHarmony南向开发培训第三次作业
    Linux命令创建文件(touch)创建文件:toucha.txt创建多个文件: toucha.txtb.txt创建目录(mkdir)创建文件夹:mkdirm创建多级文件夹:mkdir-pm/n删除文件(rm)删除文件:rma.txt删除文件夹 :rm-rm删除都可用:rm-rxxx拷贝(cp)将文件拷贝到文件夹:cpa.txtc将文件夹拷贝到文......
  • OpenHarmony Framework层开发笔记
    OH源码版本:OpenHarmony-v3.2-Beta52023.04.04由于需要裁剪系统APP,原本想法是在/applications/standard/hap/BUILD.gn增加一个part的但是最后发现vendor下有现成的裁剪APP的json配置文件,所以使用gitreset还原了/applications/standard/hap/仓库下的修改导致此仓库下的所有hap......
  • #2023盲盒+码# OpenHarmony3.2壁纸设置应用整合包和安装教程
    【本文正在参加2023「盲盒」+码有奖征文活动】https://ost.51cto.com/posts/25284(目录)序言前段时间研究了下OpenHarmony3.2自带的启动器应用源码,发现壁纸设置api设置无效的根本原因在于启动器内代码写死了一个固定的图片作为壁纸,经过不断地探索尝试,最终通过修改系统启动器和......
  • The 2nd Universal Cup. Stage 1: Qingdao
    GDescription给定一个数列,每次ban一个位置,在每次ban之前,求连续子序列逆序对数的最大值,强制在线。(6s)\(n\leq10^5,\sumn\leq10^6\)Solution先考虑用权值线段树来维护区间逆序对数,不难支持在原数列前后加或删除一个数。然后考虑原题的分裂过程,将一段\([l,r]\)分裂成\([l,p-......
  • 开发指导—利用CSS动画实现HarmonyOS动效(一)
    注:本文内容分享转载自HarmonyOS Developer官网文档一. CSS语法参考CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式,也可在页面CSS样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容JS的类Web开发范式支持的组件样式。尺寸单位● 逻辑像素px(文档中以......
  • OpenHarmony 3.2使用fio进行I/O性能测试
    一、环境配置源码环境:OpenHarmony3.2Release平台硬件:RK3568平台软件:OpenHarmony3.2Release64bitfio版本:3.35二、fio简介fio是一个I/O测试工具,可以运行在Linux、Windows等多种系统之上,可以用来测试本地磁盘、网络存储等的I/O性能。fio官网:https://fio.readthedocs.io/en/late......
  • Openharmony的启动流程
    OpenHarmony启动流程OpenHarmony源码网站:http://ci.openharmony.cn/codeSearchhttps://www.lengqinjie.xyz/lxr/source/一、kernel的启动流程图:由于OpenHarmony(下面简称OH)的标准系统的底层系统是linux,所以前期和Android系统的启动没什么太大区别。都是调用到如下的代码:/kernel/l......
  • OpenHarmony应用ArkUI 状态管理开发范例
     本文转载自《#2023盲盒+码# OpenHarmony应用ArkUI 状态管理开发范例》,作者:zhushangyuan_ 本文根据橘子购物应用,实现ArkUI中的状态管理。在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将......