OutlinedTextField je variant TextField s obrysom namiesto pozadia. Vizualne je čistejší:

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 OutlinedTextFieldExample() {
    var name by remember { mutableStateOf("") }
    var email by remember { mutableStateOf("") }

    MaterialTheme {
        Surface {
            Column(modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
                OutlinedTextField(
                    value = name,
                    onValueChange = { name = it },
                    label = { Text("Meno") }
                )
                OutlinedTextField(
                    value = email,
                    onValueChange = { email = it },
                    label = { Text("Email") },
                    singleLine = true
                )
                Text("Meno: $name")
                Text("Email: $email")
            }
        }
    }
}

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

22.2.1 TextField vs OutlinedTextField

| Vlastnosť | TextField | OutlinedTextField | | ——— | ——— | —————– | | Pozadie | Sivé | Biele | | Obrys | Žiadny | Viditeľný | | Použitie | Hlavné formuláre | Vedľajšie polia |

Oba typy majú rovnaké parametre. Výber závisí len od vizuálneho štýlu.

Úlohy

Úloha 1

Vytvor formulár s OutlinedTextField pre meno a e-mail.

Úloha 2

Obe hodnoty ulož do samostatných stavových premenných a zobraz ich pod formulárom.

Úloha 3

Pre e-mail nastav singleLine = true a pridaj zmysluplné labely.