Browse Source

Done.

pull/9/head
Nikolay Igotti 4 years ago
parent
commit
29352e6c63
  1. 4
      tutorials/Getting_Started/main.md
  2. 128
      tutorials/Mouse_Events/main.md
  3. BIN
      tutorials/Mouse_Events/mouse_click.gif
  4. BIN
      tutorials/Mouse_Events/mouse_enter.gif
  5. BIN
      tutorials/Mouse_Events/mouse_move.gif

4
tutorials/Getting_Started/main.md

@ -2,7 +2,7 @@
## What is covered
In this tutorial we will see how to create and deploy simple desktop UI application
In this tutorial we will see how to create simple desktop UI application
using Compose UI framework.
## Prerequisites
@ -96,6 +96,8 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) {
}
```
## Running the project
Open `build.gradle.kts` as a project in IDEA.
![New project](screen1.png)

128
tutorials/Mouse_Events/main.md

@ -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)

BIN
tutorials/Mouse_Events/mouse_click.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
tutorials/Mouse_Events/mouse_enter.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
tutorials/Mouse_Events/mouse_move.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 426 KiB

Loading…
Cancel
Save