TextField en OutlinedTextField
Lees wat de gebruiker typt.
TextField en OutlinedTextField is een gratis Jetpack Compose Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Jetpack Compose Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Jetpack Compose Academy bevat in totaal 4 lessen.
Waarom tekstvelden belangrijk zijn
Bijna elke app vraagt de gebruiker om iets te typen. In Compose is de TextField je toegang tot het lezen van die invoer. ✏️
De TextField-Composable
Een TextField toont een bewerkbaar vak. Het heeft een huidige waarde en een callback nodig die telkens wordt uitgevoerd wanneer de tekst verandert.
TextField(
value = name,
onValueChange = { name = it }
)State bepaalt de waarde
Het veld bewaart de tekst niet zelf. Je bewaart die in state en geeft de waarde weer door, zodat de UI altijd de nieuwste waarde toont.
var name by remember { mutableStateOf("") }onValueChange sluit de lus
Elke toetsaanslag roept onValueChange aan met de nieuwe tekst. Je slaat die op in state, Compose tekent opnieuw en het veld toont wat er is getypt.
onValueChange = { newText -> name = newText }Maak kennis met OutlinedTextField
OutlinedTextField werkt precies hetzelfde, maar tekent een duidelijke rand rond de invoer in plaats van een gevulde achtergrond.
OutlinedTextField(
value = name,
onValueChange = { name = it }
)Gevuld tegenover omlijnd
De gevulde TextField heeft een gearceerd vak en een onderstreping. De omlijnde variant is lichter en ruimtelijker. Ze werken hetzelfde, dus kies op basis van stijl.
Voeg een label toe
Een label vertelt de gebruiker waarvoor het veld dient. Het zweeft boven de tekst zodra het veld focus heeft of is ingevuld.
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text("Name") }
)Standaard één regel
Stel singleLine in op true om de invoer op één regel te houden. Het toetsenbord toont dan een actieknop Gereed in plaats van een nieuwe regel.
TextField(
value = name,
onValueChange = { name = it },
singleLine = true
)Lees de waarde overal
Omdat de tekst in state staat, kan elke andere Composable die lezen. Begroet de gebruiker zodra die klaar is met het typen van zijn of haar naam. 👋
Text("Hello, " + name)Het is een beheerd veld
Compose-velden zijn beheerd: wat je weergeeft is precies wat je als value meegeeft. Vergeet je de state bij te werken, dan lijkt het veld vastgelopen.
Begin eenvoudig en breid later uit
Een waarde plus onValueChange is alles wat je echt nodig hebt. Labels, pictogrammen en validatie voeg je later toe.
Korte controle
Welke parameter ontvangt de nieuwe tekst van de gebruiker bij elke toetsaanslag?
Samenvatting
Je hebt kennisgemaakt met TextField en OutlinedTextField: koppel een waarde uit state, werk die bij in onValueChange en voeg een label toe. Dat is tekstinvoer in Compose. 🎉
Leer Kotlin met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “TextField en OutlinedTextField” gratis?
Ja — de volledige tekst van “TextField en OutlinedTextField” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Jetpack Compose Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Jetpack Compose Academy bevat in totaal 4 lessen.
Wat leer ik in “TextField en OutlinedTextField”?
Lees wat de gebruiker typt. Je oefent met Jetpack Compose Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Jetpack Compose Academy te beginnen?
Ervaring vooraf is niet nodig. Jetpack Compose Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “TextField en OutlinedTextField”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Jetpack Compose Academy?
Ja. Elke les over Jetpack Compose Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- TextField en OutlinedTextField
- Labels, tijdelijke aanduidingen en voorloopiconen
- Toetsenbordtypen en IME-acties
- Inline-validatie en foutstatussen