Jetpack Compose je declaratívny framework pre tvorbu UI. Pôvodne bol navrhnutý pre Android, ale vďaka Compose Multiplatform ho môžeme používať aj na desktop.

19.2.1 Základný Compose Desktop projekt

V build.gradle.kts:

plugins {
    kotlin("jvm") version "2.0.21"
    id("org.jetbrains.compose") version "1.7.1"
    id("org.jetbrains.kotlin.plugin.compose") version "2.0.21"
}

dependencies {
    implementation(compose.desktop.currentOs)
    implementation(compose.material3)
}

19.2.2 Hello World

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application

@Composable
@Preview
fun App() {
    var text by remember { mutableStateOf("Hello, World!") }

    MaterialTheme {
        Surface {
            Text(text)
        }
    }
}

fun main() = application {
    Window(
        onCloseRequest = ::exitApplication,
        title = "Moja Aplikacia"
    ) {
        App()
    }
}

19.2.3 Compose paradigma

Compose funguje na princípe rekompozície - keď sa zmení stav (state), automaticky sa prekreslí len časť UI, ktorá závisí na danom stave:

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        Text("Kliknute: $count")
    }
}

remember si pamätá hodnotu medzi rekompozíciami. mutableStateOf vytvorí reaktívny stav.

Úlohy

Úloha 1

Vytvor Compose Desktop aplikáciu s oknom a vlastnou composable funkciou App.

Úloha 2

Doplň počítadlo, ktorého hodnota sa po kliknutí na tlačidlo zvýši.

Úloha 3

Over, že sa text s hodnotou počítadla po zmene stavu automaticky prekreslí.