Android Academy · Les

Het Modifier-systeem

Pas grootte, opvulling en stijl toe met modifiers.

Les 2 van 413 stappen

Het Modifier-systeem is een gratis Android Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Android Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Android Academy bevat in totaal 4 lessen.

Wat is een modifier?

Een Modifier geeft een composable extra opmaak of configuratie: de grootte, binnenmarges, achtergrond, klikgedrag en meer. Bijna elke composable accepteert een parameter modifier.

Koppelen

Modifiers worden gekoppeld: elke functie retourneert een nieuwe modifier, zodat je ze achter elkaar aanroept.

Modifier
    .padding(16.dp)
    .size(100.dp)
    .background(Color.LightGray)

Een modifier doorgeven

Je geeft de keten door aan de parameter modifier van de composable.

Text(
    text = "Hello",
    modifier = Modifier
        .padding(8.dp)
        .background(Color.Yellow)
)

De volgorde is belangrijk!

De volgorde van modifiers verandert het resultaat. Modifiers worden van links naar rechts toegepast en wikkelen zich als lagen om elkaar heen.

padding en daarna background

Hier wordt padding eerst toegepast, waardoor de achtergrond alleen het binnenste gebied vult — de ruimte van de padding blijft transparant.

Modifier
    .padding(16.dp)
    .background(Color.Red)

background en daarna padding

Wissel je ze om, dan bedekt de achtergrond het volledige gebied en duwt de padding de inhoud naar binnen. Dezelfde modifiers geven een ander uiterlijk — omdat de volgorde belangrijk is.

Modifier
    .background(Color.Red)
    .padding(16.dp)

Veelgebruikte modifiers voor grootte

Veelgebruikte modifiers voor de grootte:

size(100.dp) — vaste breedte en hoogte.
fillMaxWidth() — alle horizontale ruimte innemen.
fillMaxSize() — alle beschikbare ruimte innemen.
width() / height() — één dimensie instellen.

Klikbaar

Met Modifier.clickable reageert elke composable op tikken — zelfs een eenvoudige Text of Box.

Text(
    text = "Tap me",
    modifier = Modifier.clickable { /* handle */ }
)

Een modifierparameter opnieuw gebruiken

Volgens de conventie accepteren aangepaste composables een parameter modifier: Modifier = Modifier en geven ze die door aan hun hoofdelement. Zo kunnen aanroepers de lay-out van buitenaf aanpassen.

@Composable
fun Card(modifier: Modifier = Modifier) {
    Column(modifier = modifier) { /* ... */ }
}

Modifier is de eerste parameter

Conventie: de parameter modifier komt als eerste van de optionele parameters en heeft standaard de lege waarde Modifier. Zo blijft je API consistent met de standaardbibliotheek.

Alles samenbrengen

Een opgemaakte box met een keten waarvan de volgorde bewust is gekozen.

Box(
    modifier = Modifier
        .size(120.dp)
        .background(Color(0xFFE86F00))
        .padding(12.dp)
) {
    Text(text = "Compose", color = Color.White)
}

Korte controle

Waarom ziet Modifier.padding(16.dp).background(Color.Red) er anders uit dan Modifier.background(Color.Red).padding(16.dp)?

Beantwoord dit in de interactieve les

Samenvatting

Modifiers:

Configureren de grootte, padding, achtergrond, klikgedrag en meer.
Worden gekoppeld en in volgorde toegepast — de volgorde is belangrijk.
Aangepaste composables moeten een modifier: Modifier = Modifier als eerste parameter beschikbaar maken.

Gratis beginnen

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: 36
Lessen: 152

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Het Modifier-systeem” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Android Academy, waaronder “Het Modifier-systeem”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Android Academy bevat in totaal 4 lessen.

Wat leer ik in “Het Modifier-systeem”?

Pas grootte, opvulling en stijl toe met modifiers. Je oefent met Android 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 Android Academy te beginnen?

Ervaring vooraf is niet nodig. Android 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 2 van 4.

Hoe lang duurt de les “Het Modifier-systeem”?

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 Android Academy?

Ja. Elke les over Android 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

← Terug naar Android Academy