Box: lagen en overlappingen
Stapel inhoud met controle over de uitlijning.
Box: lagen en overlappingen is een gratis Jetpack Compose Academy-les op CoddyKit. Dit is les 3 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.
Op elkaar stapelen
Wanneer kinderen moeten overlappen in plaats van op één lijn te staan, gebruik je een Box. Deze legt inhoud op dezelfde plek over elkaar heen. 🗂️
Je eerste Box
Een Box tekent zijn kinderen in volgorde, elk boven op het vorige. Latere kinderen liggen boven eerdere, als gestapelde kaarten.
Box {
Image(painter, null)
Text("Caption")
}De z-volgorde volgt de bronvolgorde
Het laatste kind dat je schrijft, komt in de bovenste laag. Als je een label over een foto wilt plaatsen, zet je de Image dus eerst en de Text daarna.
Box neemt het formaat van zijn grootste kind over
Standaard omsluit een Box zijn grootste kind. De andere kinderen worden binnen die ruimte geplaatst in plaats van die groter te maken.
De hele Box uitlijnen
De parameter contentAlignment stelt een standaardpositie in voor elk kind. Met Alignment.Center worden ze allemaal naar het midden van de Box getrokken.
Box(contentAlignment = Alignment.Center) {
Text("Centered")
}Eén kind uitlijnen
Binnen een Box kan elk kind de modifier align gebruiken om de standaardinstelling te overschrijven. Zo zet je één item in een hoek vast.
Box {
Text("Top end", Modifier.align(Alignment.TopEnd))
}Een badge in de hoek
Met overlappen en align maak je een klassieke badge: een avatar vult de Box, terwijl een kleine stip in de hoek TopEnd wordt vastgezet.
Box {
Avatar()
Dot(Modifier.align(Alignment.TopEnd))
}Tekst over een afbeelding
Een veelgebruikt patroon is een bijschrift over een foto. Plaats de Image eerst en lijn Text daarna uit op BottomStart, zodat de tekst over de afbeelding wordt weergegeven.
Box {
Image(painter, null)
Text("Sunset", Modifier.align(Alignment.BottomStart))
}Vullen en achtergronden
Laat een Box de beschikbare ruimte vullen met fillMaxSize en voeg daarna een achtergrondkleur toe. Zo ontstaat een handige gelaagde container voor een volledig scherm.
Box(Modifier.fillMaxSize().background(Color.Black)) {
Text("Hi")
}De negen uitlijningsposities
Een Box biedt negen uitlijningsposities, van TopStart tot BottomEnd, met Center in het midden. Daarmee kun je elke benodigde positie kiezen.
Wanneer gebruik je Box
Kies Box wanneer onderdelen hetzelfde gebied delen: overlays, badges, bijschriften of een spinner die gecentreerd over inhoud staat. Het is je hulpmiddel voor lagen.
Korte controle
Laten we controleren hoe een Box zijn kinderen in lagen plaatst.
Samenvatting: Box
Je hebt Box geleerd: deze stapelt kinderen op dezelfde plek in de volgorde van de broncode, krijgt de grootte van zijn grootste kind en gebruikt contentAlignment en align om ze te plaatsen.
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 “Box: lagen en overlappingen” gratis?
Ja — de volledige tekst van “Box: lagen en overlappingen” 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 “Box: lagen en overlappingen”?
Stapel inhoud met controle over de uitlijning. 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 3 van 4.
Hoe lang duurt de les “Box: lagen en overlappingen”?
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
- Column: zaken verticaal stapelen
- Row: zaken naast elkaar plaatsen
- Box: lagen en overlappingen
- Rangschikking en uitlijning