compose-jb/tutorials/Mouse_Events/main.md

Getting Started with Compose for Desktop

What is covered

In this tutorial we will see how to install mouse events listeners on components in Compose for Desktop.

Mouse event listeners

Click listeners

Click listeners are available in both Compose on Android and Compose for Desktop, so code like that will work on both platforms:

import androidx.compose.desktop.Window
import androidx.compose.foundation.Text
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.sp

fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) {
    var count = 0
    Box(alignment = Alignment.Center, modifier = Modifier.fillMaxWidth()) {
        var text = remember { mutableStateOf("Click me!") }
        Text(
                text = text.value,
                fontSize = 50.sp,
                modifier = Modifier
                        .clickable(
                            onClick = {
                                text.value = "Click! ${count++}"
                            },
                            onDoubleClick = {
                                text.value = "Double click! ${count++}"
                            },
                            onLongClick = {
                                text.value = "Long click! ${count++}"
                            }
                        )
                        .align(Alignment.Center)
        )
    }
}

Mouse move listeners

As typically mouse or other positional pointers are available on a desktop platforms only, following code will only work with Compose for Desktop. Let's create a text, and install pointer move filter on it, changing the background color per mouse pointer position:

import androidx.compose.desktop.Window
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.pointerMoveFilter
import androidx.compose.ui.unit.IntSize

fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) {
    var color = remember { mutableStateOf(Color(0, 0, 0)) }
    Box(
            modifier = Modifier
                    .wrapContentSize(Alignment.Center)
                    .fillMaxSize()
                    .background(color = color.value)
                    .pointerMoveFilter(
                            onMove = {
                                color.value = Color(it.x.toInt() % 256, it.y.toInt() % 256, 0)
                                false
                            }
                    )
    )
}

Mouse enter listeners

Compose for Desktop also supports pointer enter and exit handlers, like this:

import androidx.compose.desktop.Window
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.pointerMoveFilter
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) {
    Column(verticalArrangement = Arrangement.spacedBy(10.dp)) {
        repeat(10) { index ->
            var active = remember { mutableStateOf(false) }
            Text(
                    modifier = Modifier
                            .fillMaxWidth()
                            .background(color = if (active.value) Color.Green else Color.White)
                            .pointerMoveFilter(
                                    onEnter = {
                                        active.value = true
                                        false
                                    },
                                    onExit = {
                                        active.value = false
                                        false
                                    }
                            ),
                    fontSize = 30.sp,
                    fontStyle = if (active.value) FontStyle.Italic else FontStyle.Normal,
                    text = "Item $index"
                )
        }
    }
}