TextField og OutlinedTextField
Læs det, brugeren skriver.
TextField og OutlinedTextField er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Hvorfor tekstfelter er vigtige
Næsten alle apps beder brugeren om at skrive noget. I Compose er TextField din vej til at læse dette input. ✏️
Composable-funktionen TextField
En TextField viser et redigerbart felt. Den skal have en aktuel værdi og et tilbagekald, der udløses, hver gang teksten ændres.
TextField(
value = name,
onValueChange = { name = it }
)Tilstanden styrer værdien
Feltet gemmer ikke selv teksten. Du holder den i state og giver den tilbage, så brugerfladen altid viser den seneste værdi.
var name by remember { mutableStateOf("") }onValueChange lukker løkken
Hvert tastetryk kalder onValueChange med den nye tekst. Du gemmer den i tilstanden, Compose tegner feltet igen, og feltet viser det, der blev skrevet.
onValueChange = { newText -> name = newText }Mød OutlinedTextField
OutlinedTextField fungerer på præcis samme måde, men tegner en enkel kant rundt om inputtet i stedet for en udfyldt baggrund.
OutlinedTextField(
value = name,
onValueChange = { name = it }
)Udfyldt eller med kant
Det filled TextField har en skygget boks og en understregning. Feltet med kant er lettere og mere luftigt. De fungerer ens, så vælg ud fra stil.
Tilføj en etiket
En label fortæller brugeren, hvad feltet er til. Den svæver over teksten, når feltet er i fokus eller indeholder tekst.
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text("Name") }
)En enkelt linje som standard
Sæt singleLine til true for at holde input på én række. Tastaturet viser derefter handlingen Done i stedet for et linjeskift.
TextField(
value = name,
onValueChange = { name = it },
singleLine = true
)Aflæs værdien hvor som helst
Fordi teksten ligger i tilstanden, kan enhver anden Composable-funktion aflæse den. Hils på brugeren, så snart vedkommende er færdig med at skrive sit navn. 👋
Text("Hello, " + name)Det er et kontrolleret felt
Compose-felter er kontrollerede: Det, du viser, er præcis det, du giver som value. Hvis du glemmer at opdatere tilstanden, ser feltet fastlåst ud.
Start enkelt, og udvid senere
En værdi plus onValueChange er alt, du egentlig behøver. Etiketter, ikoner og validering er ekstra funktioner, du kan tilføje ovenpå.
Hurtigt tjek
Hvilken parameter modtager brugerens nye tekst ved hvert tastetryk?
Opsummering
Du har mødt TextField og OutlinedTextField: Forbind en værdi fra tilstanden, opdatér den i onValueChange, og tilføj en etiket. Det er tekstinput i Compose. 🎉
Lær Kotlin med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “TextField og OutlinedTextField” gratis?
Ja — hele teksten til “TextField og OutlinedTextField” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “TextField og OutlinedTextField”?
Læs det, brugeren skriver. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Jetpack Compose Academy?
Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “TextField og OutlinedTextField”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?
Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- TextField og OutlinedTextField
- Labels, pladsholdere og førende ikoner
- Tastaturtyper og IME-handlinger
- Inlinevalidering og fejltilstande