Browse Source

new API

pull/27/head
Andrew Rudenko 4 years ago
parent
commit
d0a4e668a3
  1. 21
      tutorials/Keyboard/README.md

21
tutorials/Keyboard/README.md

@ -8,7 +8,7 @@ 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 & ShortcutHandler ## KeySets
Compose for Desktop has a few utilities to work with shortcuts: Compose for Desktop has a few utilities to work with shortcuts:
@ -18,8 +18,6 @@ Compose for Desktop has a few utilities to work with shortcuts:
Key.CtrlLeft + Key.Enter Key.CtrlLeft + Key.Enter
``` ```
`ShortcutHandler` accepts `KeysSet` and returns a handler which could be used as a callback for `keyInputFilter`
## 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:
@ -31,6 +29,8 @@ There are two ways to handle key events in Compose for Desktop:
It works the same as Compose for Android, see for details [API Reference](https://developer.android.com/reference/kotlin/androidx/compose/ui/input/key/package-summary#keyinputfilter) It works the same as Compose for Android, see for details [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`. Here is an example: The most common use case is to define keyboard handlers for active controls like `TextField`. Here is an example:
``` kotlin ``` kotlin
@ -49,6 +49,7 @@ import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue import androidx.compose.runtime.setValue
import androidx.compose.ui.input.key.shortcuts
@OptIn(ExperimentalKeyInput::class) @OptIn(ExperimentalKeyInput::class)
fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) { fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) {
@ -60,12 +61,16 @@ 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.keyInputFilter( modifier = Modifier.shortcuts {
ShortcutHandler(Key.CtrlLeft + Key.Enter) { on(Key.CtrlLeft + Key.Minus) {
consumedText -= text.length
text = ""
}
on(Key.CtrlLeft + Key.Equals) {
consumedText += text.length consumedText += text.length
text = "" text = ""
} }
) }
) )
} }
} }
@ -105,11 +110,11 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) {
modifier = Modifier.padding(4.dp), modifier = Modifier.padding(4.dp),
onClick = { onClick = {
AppWindow(size = IntSize(200, 200)).also { AppWindow(size = IntSize(200, 200)).also {
it.keyboard.shortcut(Key.Escape) { it.keyboard.setShortcut(Key.Escape) {
it.close() it.close()
} }
}.show { }.show {
Text("I'm a popup!") Text("I'm popup!")
} }
} }
) { ) {

Loading…
Cancel
Save