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

Aisanyi
发布于 2025-6-27 11:47
浏览
0收藏

应用场景

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

  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属性还可以帮助我们判断移入的是一个手写笔还是鼠标,我们可以根据类型展示不同的样式。还可以在移入事件中增加动画效果。

分类
标签
收藏
回复
举报
回复
    相关推荐