【鸿蒙开发】鸿蒙组件悬浮交互实现方案

应用场景

鸿蒙系统支持两种主要的悬浮交互场景：

1. PC端鼠标悬浮
2. 手写笔悬浮操作

核心实现

基础悬浮效果

通过onHover事件监听实现悬浮状态检测，关键参数说明：

参数：

参数名	类型	必填	说明
isHover	boolean	是	鼠标或手写笔是否悬浮在组件上，进入时为true， 离开时为false。
event11+	HoverEvent	是	设置阻塞事件冒泡属性。

我们在移入事件是true的时候可以将背景色变色, 移出的时候还原，代码如下

@Component
export struct NavItem {
  @State hover: boolean = false;

  build() {
    Row() {
       Text('移入变色')
    }
    .height(60)
    .backgroundColor(this.hover ? 'red' : undefined)
    .width('100%')
    .onHover((isHover) => {
      this.hover = isHover;
    })
  }
}

这样我们就能实现一个简单的移入效果

拓展

同时event事件的sourceTool属性还可以帮助我们判断移入的是一个手写笔还是鼠标，我们可以根据类型展示不同的样式。还可以在移入事件中增加动画效果。