Clickable areas of image (Mouseover event)

Question

Any idea of how to approach clickable areas on images? It would be great if in desktop mode (yeah the desktop mode is available now; see https://www.jetbrains.com/lp/compose) there was something like onMouseover so the view was highlighted when the mouse is hovering over it.

Kalong

Answer 1

In the Desktop Compose, you can achieve the mouse over actions using the input pointer.

Example:

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

Note: pointerMoveFilter is an extension function for Modifier so it's not only for images, we can use it for all components in Desktop Compose.

Ref: Getting Started with Compose for Desktop - Mouse event listeners

Langelo

Answer 2

Sep 2023
Since pointerMoveFilter is deprecated, Try to use the hoverable modifier, like this :

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

Surra