Študijné materiály

BasicTextField je najjednoduchší variant - nemá žiadne štýlovanie ani label. Používame ho keď chceme plnú kontrolu nad vzhľadom:

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application

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

    MaterialTheme {
        Surface {
            Column(modifier = Modifier.padding(16.dp)) {
                BasicTextField(
                    value = text,
                    onValueChange = { text = it },
                    textStyle = TextStyle(fontSize = 18.sp, color = Color.Black)
                )
                Text("Zadane: $text")
            }
        }
    }
}

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

22.3.1 Kedy použiť BasicTextField?

  • Keď potrebujeme vlastný štýl textového poľa
  • Pre vyhľadávacie polia s vlastným dizajnom
  • Pre jednoduché vstupy bez extra funkcií

22.3.2 Porovnanie všetkých troch

| Typ | Štýl | Label | Použitie | |———————|————|——-|——————| | TextField | Material 3 | Áno | Hlavné formuláre | | OutlinedTextField | Material 3 | Áno | Vedľajšie polia | | BasicTextField | Žiadny | Nie | Vlastný dizajn |

BasicTextField je základ, z ktorého sú postavené ostatné varianty.

Úlohy

Úloha 1

Vytvor BasicTextField pre vyhľadávací výraz a zobraz jeho aktuálnu hodnotu.

Úloha 2

Nastav vlastný TextStyle s veľkosťou 20 sp a vybranou farbou textu.

Úloha 3

Obaľ pole do Box s vlastným pozadím a paddingom, aby malo vlastný dizajn.