TextField je základné textové pole v Compose Material 3. Umožňuje používateľovi zadať text:

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application

@Composable
fun TextFieldExample() {
    var text by remember { mutableStateOf("") }

    MaterialTheme {
        Surface {
            Column(modifier = Modifier.padding(16.dp)) {
                TextField(
                    value = text,
                    onValueChange = { newText -> text = newText },
                    label = { Text("Zadaj meno") },
                    placeholder = { Text("Janko") }
                )
                Text("Zadane: $text")
            }
        }
    }
}

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

22.1.1 Povinné parametre

| Parameter | Popis | | ——— | —– | | value | Aktuálna hodnota textu | | onValueChange | Callback pri zmene textu |

22.1.2 Voliteľné parametre

| Parameter | Popis | | ——— | —– | | label | Nápis nad pole (ukáže sa ako placeholder) | | placeholder | Placeholder keď je pole prázdne | | leadingIcon | Ikona pred textom | | trailingIcon | Ikona za textom | | singleLine | Či je pole na jeden riadok | | enabled | Či je pole aktivne |

TextField v Material 3 má automatický štýl s pozadím a obrysom.

Úlohy

Úloha 1

Vytvor TextField pre meno so stavom uloženým cez remember.

Úloha 2

Pod pole priebežne vypisuj počet zadaných znakov.

Úloha 3

Pridaj label, placeholder a nastav pole na jeden riadok.