HarmonyOS鸿蒙Next中pc组件上怎么实现鼠标悬浮提示的功能啊

HarmonyOS鸿蒙Next中pc组件上怎么实现鼠标悬浮提示的功能啊 pc 组件上怎么实现鼠标悬浮 提示的功能呢？有啥好的方案推荐

5 回复

我觉得这个方案可行，没语法错误，但是编译一直没通过，不知道是不是IDE得问题。6.0Beta2

// hover_tooltip.ets
interface Position {
  x: number;
  y: number;
}
@Entry
@Component
struct HoverTooltipExample {
  @State isHover: boolean = false
  @State tipPosition: Position = { x:0 , y: 0 }

  build() {
    Column() {
      Button('Hover Me')
        .width(150)
        .height(60)
        .backgroundColor('#409EFF')
        .hoverEffect(HoverEffect.Highlight)
        .onHover((isHover: boolean, event: HoverEvent) => {
          this.isHover = isHover
          this.tipPosition = {
            x: event.windowX!,
            y: event.windowY!
          }
        })

      if (this.isHover) {
        Text('This is a tooltip!')
          .position({
            x: this.tipPosition.x + 20,
            y: this.tipPosition.y + 20
          })
          .fontSize(14)
          .backgroundColor('#333333')
          .fontColor('#FFFFFF')
          .padding(10)
          .borderRadius(8)
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

更多关于HarmonyOS鸿蒙Next中pc组件上怎么实现鼠标悬浮提示的功能啊的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鼠标悬浮可以通过监听组件的onHover事件实现，提示的功能可以使用Popup，参考demo

// xxx.ets
@Entry
@Component
struct MouseEventExample {
  @State hoverText: string = 'no hover';
  @State action: string = '';
  @State mouseBtn: string = '';
  @State color: Color = Color.Blue;
  @State handlePopup: boolean = false;

  build() {
    Column({ space: 20 }) {
      Button(this.hoverText)
        .width(180).height(80)
        .backgroundColor(this.color)
        .onHover((isHover: boolean, event: HoverEvent) => {
          // 通过onHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色
          if (isHover) {}
            this.handlePopup = true
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
          placementOnTop: true,
          showInSubWindow:false,
          // 设置气泡避让软键盘
          keyboardAvoidMode: KeyboardAvoidMode.DEFAULT,
          primaryButton: {
            value: 'confirm',
            action: () => {
              this.handlePopup = false;
              console.info('confirm Button click');
            }
          },
          // 第二个按钮
          secondaryButton: {
            value: 'cancel',
            action: () => {
              this.handlePopup = false;
              console.info('cancel Button click');
            }
          },
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false;
            }
          }
        })
        .position({ x: 100, y: 150 })
    }.padding({ top: 30 }).width('100%')
  }
}

可以给组件使用 鼠标事件，监听鼠标移入，然后进行提示，

鼠标事件-基础输入事件-通用事件-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

switch (event.action) {
  case MouseAction.Hover:
    this.action = 'Hover';
    break;
  case MouseAction.Press:
    this.action = 'Press';
    break;
  case MouseAction.Move:
    this.action = 'Move';
    break;
  case MouseAction.Release:
    this.action = 'Release';
    break;
}

cke_988.png

在HarmonyOS Next中，使用PC组件实现鼠标悬浮提示功能可通过Tooltip组件完成。在ArkUI中，为需要提示的组件添加.tooltip()修饰器即可。示例代码：

Button("按钮")
  .tooltip("这是提示信息")

Tooltip默认在鼠标悬停时显示，支持自定义文本、显示时长和样式。如需更复杂交互，可配合@State变量控制显示逻辑。该功能基于鸿蒙声明式UI开发范式实现，不依赖传统Web技术。

在HarmonyOS Next中实现PC组件上的鼠标悬浮提示功能，可以通过以下方式实现：

  1. 使用Tooltip组件（推荐方案）：
// 示例代码
import { Tooltip } from '@ohos/arkui';

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('Hover me')
        .tooltip({
          content: 'This is a tooltip',
          placement: 'top'
        })
    }
  }
}
  1. 自定义实现方案：
@Entry
@Component
struct Index {
  [@State](/user/State) isHovered: boolean = false

  build() {
    Column() {
      Button('Hover me')
        .onHover((isHover) => {
          this.isHovered = isHover
        })
      
      if (this.isHovered) {
        Text('Tooltip content')
          .position({ x: 100, y: 50 })
          .backgroundColor('#F5F5F5')
          .padding(10)
          .borderRadius(4)
      }
    }
  }
}

关键点说明：

  1. Tooltip组件是官方提供的悬浮提示解决方案，支持多种位置配置
  2. 自定义方案通过@State和onHover事件控制提示显示
  3. 两种方案都支持PC端鼠标悬浮场景

性能优化建议：

  • 避免在频繁触发的hover事件中执行复杂逻辑
  • 对于复杂提示内容，考虑使用LazyForEach优化渲染性能
回到顶部