鸿蒙交互事件开发01——点击/拖拽/触摸事件

 如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！扫描下方名片，关注公众号，公众号更新更快，同时也有更多学习资料和技术讨论群。

1    概    述   

事件是人机交互的基础，鸿蒙开发中，事件分为两大类：a）通用事件；b）手势事件。

👉🏻 通用事件

通用事件又可以按照触发类型来分类，分为三大类：触屏事件、键鼠事件和焦点事件。

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

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

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

   2. 按键事件是指通过连接和使用外设键盘操作时所响应的事件。

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

👉🏻 手势事件

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

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

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

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

下面，我们先了解下最常用事件：触屏事件，即：点击、拖拽、触摸事件。

2 点 击 事 件 

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

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

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

例如通过按钮的点击事件控制图片的显示和隐藏，代码如下：

@Entry@Componentstruct 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%')  }}

3 拖 拽 事 件 

拖拽事件指手指/手写笔长按组件（>=500ms），并拖拽到