Tlačidlá (Button) sú základné interaktívne prvky v Compose. Okrem základného Button poznáme aj ďalšie varianty:

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
fun Tlacidla() {
    var count by remember { mutableStateOf(0) }

    MaterialTheme {
        Surface {
            Button(onClick = { count++ }) {
                Text("Klasické tlačidlo")
            }

            OutlinedButton(onClick = { count-- }) {
                Text("Outlined tlačidlo")
            }

            TextButton(onClick = { count = 0 }) {
                Text("Text tlačidlo")
            }

            Text("Pocet: $count")
        }
    }
}

fun main() = application {
    Window(onCloseRequest = ::exitApplication, title = "Tlacidla") {
        Tlacidla()
    }
}

20.3.1 Typy tlačidiel

| Typ | Popis | | — | —– | | Button | Plné tlačidlo s pozadím | | OutlinedButton | Tlačidlo s obrysom | | TextButton | Tlačidlo bez pozadia | | ElevatedButton | Tlačidlo s tieňom | | FloatingActionButton | Plovúce tlačidlo |

20.3.2 Deaktivácia tlačidla

Button(
    onClick = { /* akcia */ },
    enabled = count < 10  // deaktivujeme ak count >= 10
) {
    Text("Klikni ($count)")
}

20.3.3 Tlačidlo s ikonou

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add

Button(onClick = { /* akcia */ }) {
    Icon(Icons.Default.Add, contentDescription = "Pridat")
    Text("Pridaj")
}

Tlačidlo automaticky prispôsobí veľkosť podľa obsahu.

Úlohy

Úloha 1

Vytvor počítadlo s tlačidlami na zvýšenie, zníženie a vynulovanie hodnoty.

Úloha 2

Použi pri troch akciách Button, OutlinedButton a TextButton.

Úloha 3

Deaktivuj tlačidlo na zvýšenie, keď počítadlo dosiahne hodnotu 10.