@ -8,16 +8,6 @@ This tutorial expects that you have already set up the Compose project as descri
In this tutorial, we will look at two different ways of handling keyboard events in Compose for Desktop as well as the utilities that we have to do this.
In this tutorial, we will look at two different ways of handling keyboard events in Compose for Desktop as well as the utilities that we have to do this.
## KeySets
Compose for Desktop has a few utilities to work with shortcuts:
`KeysSet` represents a set of keys that can be simultaneously pressed. You can construct a KeysSet using the Key's extension function:
``` kotlin
Key.CtrlLeft + Key.Enter
```
## Event handlers
## Event handlers
There are two ways to handle key events in Compose for Desktop:
There are two ways to handle key events in Compose for Desktop:
@ -29,9 +19,7 @@ There are two ways to handle key events in Compose for Desktop:
It works the same as Compose for Android, for details see [API Reference](https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/package-summary#keyinputfilter)
It works the same as Compose for Android, for details see [API Reference](https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/package-summary#keyinputfilter)
`Modifier.shortcuts` is used to define one or multiple callbacks for `KeysSet`s.
The most common use case is to define keyboard handlers for active controls like `TextField`. You can use both `onKeyEvent` and `onPreviewKeyEvent` but the last one is usually preferable to define shortcuts while it guarantees you that key events will not be consumed by children components. Here is an example:
The most common use case is to define keyboard handlers for active controls like `TextField`. Here is an example:
fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) {
fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) {
MaterialTheme {
MaterialTheme {
var consumedText by remember { mutableStateOf(0) }
var consumedText by remember { mutableStateOf(0) }
@ -60,14 +49,19 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) {
TextField(
TextField(
value = text,
value = text,
onValueChange = { text = it },
onValueChange = { text = it },
modifier = Modifier.shortcuts {
modifier = Modifier.onPreviewKeyEvent {
on(Key.CtrlLeft + Key.Minus) {
when {
(it.isMetaPressed && it.key == Key.Minus) -> {
consumedText -= text.length
consumedText -= text.length
text = ""
text = ""
true
}
}
on(Key.CtrlLeft + Key.Equals) {
(it.isMetaPressed && it.key == Key.Equals) -> {
consumedText += text.length
consumedText += text.length
text = ""
text = ""
true
}
else -> false
}
}
}
}
)
)
@ -77,40 +71,75 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) {
```
```
Note the annotation `@OptIn(ExperimentalKeyInput::class)`. Keyboard-related event handlers are still an experimental feature of Compose, and later API changes are possible. So it requires the use of a special annotation to emphasize the experimental nature of the code.
Note the annotation `@OptIn(ExperimentalKeyInput::class)`. Some keys related APIs are still an experimental feature of Compose, and later API changes are possible. So it requires the use of a special annotation to emphasize the experimental nature of the code.
## Window-scoped events
## Window-scoped events
`AppWindow` instances have a `keyboard` property. It is possible to use it to define keyboard shortcuts that are always active in the current window. Here is an example:
`LocalAppWindow` instances have a `keyboard` property. It is possible to use it to define keyboard event handlers that are always active in the current window. You also can get window instance for popups. Again, you possibly want to use `onPreviewKeyEvent` here to intercept events. Here is an example:
Andrew Rudenko
3 years ago
committed by
GitHub
