鸿蒙交互事件开发02——鼠标与键盘事件

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

1、概述

鸿蒙除了常见的触摸事件外，也支持一些外接设备的事件，例如：鼠标和键盘事件（题外话一句：不出意外的话，鸿蒙将会有PC版）。

其中，鼠标事件可以是鼠标外设，也可以是触控板。

2、鼠标事件

鼠标事件可触发以下回调：

• onHover(event: (isHover: boolean) => void)

    鼠标进入或退出组件时触发该回调。

    isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true, 退出时为false。

    当组件绑定onHover回调时，可以通过hoverEffect属性设置该组件的鼠标悬浮态显示效果。

• onMouse(event: (event?: MouseEvent) => void)

    当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时，触发该回调，event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。

鼠标事件数据流如下：

鼠标事件传递到ArkUI之后，会先判断鼠标事件是否是左键的按下/抬起/移动，然后做出不同响应：

• 是左键：鼠标事件先转换成相同位置的触摸事件，执行触摸事件的碰撞测试、手势判断和回调响应。接着去执行鼠标事件的碰撞测试和回调响应。

• 是右键：事件仅用于执行鼠标事件的碰撞测试和回调响应。

所有单指可响应的触摸事件/手势事件，均可通过鼠标左键来操作和响应。 例如当我们需要开发单击Button跳转页面的功能、且需要支持手指点击和鼠标左键点击，那么只绑定一个点击事件（onClick）就可以实现该效果。 若需要针对手指和鼠标左键的点击实现不一样的效果，可以在onClick回调中，使用回调参数中的source字段即可判断出当前触发事件的来源是手指还是鼠标。

2.1、onHover

接口定义如下：

onHover(event: (isHover?: boolean) => void)

鼠标悬浮事件回调。参数isHover类型为boolean，表示鼠标进入组件或离开组件。该事件不支持自定义冒泡设置，默认父子冒泡。

若组件绑定了该接口，当鼠标指针从组件外部进入到该组件的瞬间会触发事件回调，参数isHover等于true；鼠标指针离开组件的瞬间也会触发该事件回调，参数isHover等于false。

举个例子，Demo代码如下：

// xxx.ets@Entry@Componentstruct MouseExample {
    @State isHovered: boolean = false;  build() {
      Column() {
        Button(this.isHovered ? 'Hovered!' : 'Not Hover')        .width(200).height(100)        .backgroundColor(this.isHovered ? Color.Green : Color.Gray)        .onHover((isHover: boolean) => { // 使用onHover接口监听鼠标是否悬浮在Button组件上          this.isHovered = isHover;        })    }.width('100%').height('100%').justifyContent(FlexAlign.Center)  }}

示例创建了一个Button组件，初始背景色为灰色，内容为“Not Hover”。示例中的Button组件绑定了onHover回调，在该回调中将this.isHovered变量置为回调参数：isHover。

当鼠标从Button外移动到Button内的瞬间，回调响应࿰