【鸿蒙实战开发】ArkUI-交互事件详解

前言

通用事件按照触发类型来分类，包括触屏事件、键鼠事件、焦点事件和拖拽事件。

• 触屏事件：手指或手写笔在触屏上的单指或单笔操作。

• 键鼠事件：包括外设鼠标或触控板的操作事件和外设键盘的按键事件。

  • 鼠标事件是指通过连接和使用外设鼠标/触控板操作时所响应的事件。
  • 按键事件是指通过连接和使用外设键盘操作时所响应的事件。

• 焦点事件：通过以上方式控制组件焦点的能力和响应的事件。

• 拖拽事件：由触屏事件和键鼠事件发起，包括手指/手写笔长按组件拖拽和鼠标拖拽。

• 事件分发：描述触控类事件（不包括按键，焦点）响应链的命中收集过程。

手势事件由绑定手势方法和绑定的手势组成，绑定的手势可以分为单一手势和组合手势两种类型，根据手势的复杂程度进行区分。

• 绑定手势方法：用于在组件上绑定单一手势或组合手势，并声明所绑定的手势的响应优先级。

• 单一手势：手势的基本单元，是所有复杂手势的组成部分。

• 组合手势：由多个单一手势组合而成，可以根据声明的类型将多个单一手势按照一定规则组合成组合手势，并进行使用。

概述

ArkUI触控事件，根据输入源不同，主要划分为touch类与mouse类。

touch类的输入源包含：finger、pen

mouse类的输入源包含：mouse、touchpad、joystick

由这两类输入源可以触发如下事件：

touch	mouse
触摸事件	触摸事件
点击事件	鼠标事件
拖拽事件	点击事件
手势事件	拖拽事件
	手势事件

无论是touch类事件还是mouse类事件，在ArkUI框架上均由触摸测试发起，触摸测试直接决定了ArkUI事件响应链的生成及事件的分发。

触摸测试

如下是对触摸测试结果影响较大的几个因素：

• TouchTest：触摸测试入口方法，此方法无外部接口

• hitTestBehavior：触摸测试控制

• interceptTouch：事件自定义拦截

• responseRegion：触摸热区设置

• enabled：禁用控制

• 安全组件

• 其他属性设置：透明度/组件下线

TouchTest

• TouchTest的触发时机由每次点按的按下动作发起，默认由组件树的根节点TouchTest方法作为入口。

• hitTestBehavior可以由InterceptTouch事件变更。

• 触摸热区/禁用控制/透明度等不满足组件事件交互诉求，会导致立即返回父节点。

触摸测试控制

具体用法参考触摸测试控制

• 命中：触摸测试成功收集到当前组件/子组件的事件。

• 子组件对父组件触摸测试的影响，取决于最后一个没有被阻塞触摸测试的子组件。

• HitTestMode.Default：默认不配hitTestBehavior属性的效果，自身如果命中会阻塞兄弟，但是不阻塞孩子。

• HitTestMode.None：自身不接收事件，但不会阻塞兄弟/孩子继续做触摸测试。
  

• HitTestMode.Block：阻塞孩子的触摸测试，如果自身触摸测试命中，会阻塞兄弟及父亲的触摸测试。

• HitTestMode.Transparent：自身进行触摸测试，同时不阻塞兄弟及父亲。

触屏事件

自定义事件拦截

自定义事件拦截在按下触发时，可以根据业务状态动态改变组件的hitTestBehavior属性。

禁用控制

设置禁用控制的组件，包括其子组件不会发起触摸测试过程，会直接返回父节点继续触摸测试。

触摸热区设置

触摸热区设置会影响触屏/鼠标类的触摸测试，如果设置为0，或不可触控区域，则事件直接返回父节点继续触摸测试。

安全组件

ArkUI包含的安全组件有：使用位置组件、使用粘贴组件、使用保存组件等。

安全组件当前对触摸测试影响：如果有组件z序比安全组件靠前，且遮盖安全组件，则安全组件事件直接返回到父节点继续触摸测试。

事件响应链的收集

ArkUI事件响应链收集，根据右子树（按组件布局的先后层级）优先的后序遍历流程，流程为：

foreach(item=>(node.rbegin(),node.rend(){
    item.TouchTest()
}
node.collectEvent()

响应链收集举例，按下图的组件树，hitTestBehavior属性均为默认，用户点按的动作如果发生在组件5上，则最终收集到的响应链，以及先后关系是5，3，1。

因为组件3的hitTestBehavior属性为Default，收集到事件后会阻塞兄弟节点，所以没有收集组件1的左子树。

触屏事件指当手指/手写笔在组件上按下、滑动、抬起时触发的回调事件。包括点击事件、拖拽事件和触摸事件。

图1 触摸事件原理

点击事件

点击事件是指通过手指或手写笔做出一次完整的按下和抬起动作。当发生点击事件时，会触发以下回调函数：

onClick(event: (event?: ClickEvent) => void)

event参数提供点击事件相对于窗口或组件的坐标位置，以及发生点击的事件源。

例如通过按钮的点击事件控制图片的显示和隐藏。

@Entry
@Component
struct IfElseTransition {
  @State flag: boolean = true;
  @State btnMsg: string = 'show';

  build() {
    Column() {
      Button(this.btnMsg).width(80).height(30).margin(30)
        .onClick(() => {
          if (this.flag) {
            this.btnMsg = 'hide';
          } else {
            this.btnMsg = 'show';
          }
          // 点击Button控制Image的显示和消失
          this.flag = !this.flag;
        })
      if (this.flag) {
        Image($r('app.media.icon')).width(200).height(200)
      }
    }.height('100%').width('100%')
  }
}

图2 通过按钮的点击事件控制图片的显示和隐藏

触摸事件

当手指或手写笔在组件上触碰时，会触发不同动作所对应的事件响应，包括按下（Down）、滑动（Move）、抬起（Up）事件：

onTouch(event: (event?: TouchEvent) => void)

• event.type为TouchType.Down：表示手指按下。

• event.type为TouchType.Up：表示手指抬起。

• event.type为TouchType.Move：表示手指按住移动。

• event.type为TouchType.Cancel：表示打断取消当前手指操作。

触摸事件可以同时多指触发，通过event参数可获取触发的手指位置、手指唯一标志、当前发生变化的手指和输入的设备源等信息。

// xxx.ets
@Entry
@Component
struct TouchExample {
  @State text: string = '';
  @State eventType: string = '';

  build() {
    Column() {
      Button('Touch').height(40).width(100)
        .onTouch((event?: TouchEvent) => {
          if(event){
            if (event.type === TouchType.Down) {
              this.eventType = 'Down';
            }
            if (event.type === TouchType.Up) {
              this.eventType = 'Up';
            }
            if (event.type === TouchType.Move) {
              this.eventType = 'Move';
            }
            this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
            + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
            + event.target.area.width + '\nheight:' + event.target.area.height
          }
        })
      Button('Touch').height(50).width(200).margin(20)
        .onTouch((event?: TouchEvent) => {
          if(event){
            if (event.type === TouchType.Down) {
              this.eventType = 'Down';
            }
            if (event.type === TouchType.Up) {
              this.eventType = 'Up';
            }
            if (event.type === TouchType.Move) {
              this.eventType = 'Move';
            }
            this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
            + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
            + event.target.area.width + '\nheight:' + event.target.area.height
          }
        })
      Text(this.text)
    }.width('100%').padding(30)
  }
}

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
●更多鸿蒙最新技术知识点，请移步前往小编：https://gitee.com/