HarmonyOS鸿蒙Next中我的onhover为什么不生效，求大神解答！！谢谢！！

HarmonyOS鸿蒙Next中我的onhover为什么不生效，求大神解答！！谢谢！！

@Entry
@Component
struct Pest {
  @State butt1: string = ''
  @State butt2: string = ''

  build() {
    Column(){
      Text(){
        Span('BUTTOM')
          .fontSize(30)
          .onClick(() => {
            console.info('我是点击文本');
            this.butt1 = '我是点击文本';
          })
          .onHover(() => {
            console.info('我是悬浮文本');
            this.butt2 = '我是悬浮文本'
          })
      }
      Text('点击：' + this.butt1)
      Text('悬浮：' + this.butt2)

    }
    .backgroundColor(Color.Pink)
    .width('100%')
    .height(100)
  }
}

更多关于HarmonyOS鸿蒙Next中我的onhover为什么不生效，求大神解答！！谢谢！！的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

用模拟器吧，实测模拟器是OK的，预览器实测后发现确实不行

更多关于HarmonyOS鸿蒙Next中我的onhover为什么不生效，求大神解答！！谢谢！！的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


模拟器试了也不行，贴了官方的代码

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

模拟器是可以的，你要下载2in1模拟器，这个onhover鼠标移入或移出控件范围是针对于2in1设备的，手机是不行的

我是了一下真机和模拟器都是不生效的：
楼主是用来开发电脑版鸿蒙应用吗

期待HarmonyOS能在未来推出更多针对企业用户的解决方案。

模拟器是可以的，你要下载2in1模拟器，这个onhover鼠标移入或移出控件范围是针对于2in1设备的，手机是不行的

改了一下，用模拟器试一下（别用预览器）------

@Entry
@Component
struct Pest {
  @State butt1: string = ''
  @State butt2: string = ''

  build() {
    Column(){
      Text('BUTTOM')  // 改用Text作为事件承载组件
        .fontSize(30)
        .hoverEffect(HoverEffect.Auto) // 启用悬停反馈
        .onClick(() => {
          console.info('我是点击文本');
          this.butt1 = '我是点击文本';
        })
        .onHover((isHover: boolean) => {  // 正确接收boolean参数
          console.info('悬浮状态:', isHover);
          this.butt2 = isHover ? '我是悬浮文本' : ''
        })

      Text('点击：' + this.butt1)
      Text('悬浮：' + this.butt2)
    }
    .backgroundColor(Color.Pink)
    .width('100%')
    .height(100)
  }
}

运行环境是模拟环境还是真机环境？

额 我用预览器查看，预览器是不生效是吗？

预览器是不行的，至少要弄个模拟器

在HarmonyOS Next中，onhover事件需要满足以下条件才能生效：

  1. 组件必须设置hoverEffect属性（如HoverEffect.Auto/HoverEffect.Scale）
  2. 组件需要是可交互的（如Button或设置了clickable的组件）
  3. 确保没有其他手势事件覆盖hover事件
  4. 检查组件是否被其他视图遮挡
  5. 确认运行环境支持hover交互（如支持指针设备的设备）

在HarmonyOS Next中，onHover事件需要组件支持悬停交互才能生效。从代码来看，问题可能出在Span组件上。Span组件默认可能不支持悬停事件，建议改为在Text组件上直接添加onHover事件：

@Entry
@Component
struct Pest {
  @State butt1: string = ''
  @State butt2: string = ''

  build() {
    Column(){
      Text('BUTTOM')
        .fontSize(30)
        .onClick(() => {
          console.info('我是点击文本');
          this.butt1 = '我是点击文本';
        })
        .onHover((isHover: boolean) => {  // 注意参数类型
          console.info('我是悬浮文本', isHover);
          this.butt2 = isHover ? '我是悬浮文本' : '';
        })
      Text('点击：' + this.butt1)
      Text('悬浮：' + this.butt2)
    }
    .backgroundColor(Color.Pink)
    .width('100%')
    .height(100)
  }
}

关键修改点：

  1. 直接在Text组件上使用onHover而不是Span
  2. onHover回调应该接收boolean参数表示悬停状态
  3. 确保Text组件有足够的触摸区域(当前height可能太小)
回到顶部