图像的可点击区域（鼠标悬停事件）- Jetpack Compose Desktop

Question

知道如何处理图像上的可点击区域吗？如果在桌面构建中（是的，桌面模式现在可用:) https://www.jetbrains.com/lp/compose/）那就太好了，他们有像

onMouseover

这样的东西，所以当鼠标悬停。

Answer 1

在桌面撰写中，您可以使用输入指针实现鼠标悬停操作。

示例：

Image(imageResource("circus.jpg"), Modifier.size(200.dp)
  .pointerMoveFilter(
    onEnter = {
      println("On Mouse(pointer) Enter")
      false
    },
    onExit = {
      println("on Mouse(pointer) Exit")
      false
    }))

注意：

pointerMoveFilter

是

Modifier

的扩展函数，因此它不仅适用于图像，我们可以将它用于Desktop Compose中的所有组件。

参考：Compose for Desktop 入门 - 鼠标事件侦听器

Answer 2

2023 年 9 月
由于

pointerMoveFilter

已被弃用，请尝试使用 hoverable 修饰符，如下所示：

val interactionSource = remember { MutableInteractionSource() }
val isHovered by interactionSource.collectIsHoveredAsState()
Text( // in your case Image
      modifier=Modifier.hoverable(interactionSource),
      text = "hover = ${isHovered}"
     )