|
|
|
@ -2,48 +2,134 @@
|
|
|
|
|
|
|
|
|
|
## What is covered |
|
|
|
|
|
|
|
|
|
In this tutorial we will see how to install mouse even listeners on components |
|
|
|
|
In this tutorial we will see how to install mouse events listeners on components |
|
|
|
|
in Compose for Desktop. |
|
|
|
|
|
|
|
|
|
## Mouse event listeners |
|
|
|
|
|
|
|
|
|
Let's create a text, and install pointer move filter on it: |
|
|
|
|
### Click listeners |
|
|
|
|
|
|
|
|
|
Click listeners are available in both Compose on Android and Compose for Desktop, |
|
|
|
|
so code like that will work on both platforms: |
|
|
|
|
|
|
|
|
|
```kotlin |
|
|
|
|
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.input.pointer.pointerMoveFilter |
|
|
|
|
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) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
![Application running](mouse_click.gif) |
|
|
|
|
|
|
|
|
|
### 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: |
|
|
|
|
```kotlin |
|
|
|
|
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 overText = remember { mutableStateOf("Move mouse over text:") } |
|
|
|
|
Text( |
|
|
|
|
text = overText.value, |
|
|
|
|
fontSize = 40.sp, |
|
|
|
|
var color = remember { mutableStateOf(Color(0, 0, 0)) } |
|
|
|
|
Box( |
|
|
|
|
modifier = Modifier |
|
|
|
|
.wrapContentSize(Alignment.Center) |
|
|
|
|
.fillMaxSize() |
|
|
|
|
.background(color = color.value) |
|
|
|
|
.pointerMoveFilter( |
|
|
|
|
onMove = { |
|
|
|
|
if (it.x > 10 && it.y > 10) |
|
|
|
|
overText.value = "Move position: $it" |
|
|
|
|
false |
|
|
|
|
}, |
|
|
|
|
onEnter = { |
|
|
|
|
overText.value = "Over enter" |
|
|
|
|
false |
|
|
|
|
}, |
|
|
|
|
onExit = { |
|
|
|
|
overText.value = "Over exit" |
|
|
|
|
false |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
onMove = { |
|
|
|
|
color.value = Color(it.x.toInt() % 256, it.y.toInt() % 256, 0) |
|
|
|
|
false |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
![Application running](mouse_move.gif) |
|
|
|
|
|
|
|
|
|
### Mouse enter listeners |
|
|
|
|
|
|
|
|
|
Compose for Desktop also supports pointer enter and exit handlers, like this: |
|
|
|
|
```kotlin |
|
|
|
|
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" |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
``` |
|
|
|
|
![Application running](mouse_enter.gif) |