clickable op elke Composable
Maak elementen die geen knoppen zijn aantikbaar.
clickable op elke Composable is een gratis Jetpack Compose Academy-les op CoddyKit. Dit is les 4 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.
Alles kan een tikdoel worden
Soms wil je dat een hele kaart of rij op tikken reageert, in plaats van een knop. Met de clickable-modifier kan elke composable reageren. 👆
De clickable-modifier
Voeg Modifier.clickable toe aan elk element en geef een onClick-lambda door. Het element verwerkt nu tikken, net als een knop.
Text(
"Open profile",
modifier = Modifier.clickable { open() }
)Tikken geven een rimpelanimatie
clickable voegt standaard een Material-rimpelanimatie toe. Zo krijgt de gebruiker direct visuele feedback en ziet die dat de tik is geregistreerd.
Box(Modifier.clickable { toggle() }) {
Text("Tap this box")
}Maak hele kaarten tikbaar
Dit patroon is vooral handig voor lijstitems: zet clickable op de container van de rij, zodat een tik ergens in de rij het detailscherm opent.
Row(Modifier.clickable { openItem(id) }) {
Text(item.title)
}Voeg een inhoudsbeschrijving toe
Geef voor toegankelijkheid een onClickLabel door waarin staat wat de tik doet, zodat schermlezers de actie duidelijk aankondigen.
Modifier.clickable(
onClickLabel = "Open profile"
) { open() }De volgorde in de keten is belangrijk
Plaats clickable vóór de opvulling om het opgevulde gebied tikbaar te maken, of erna om tikken te beperken tot de binnenste inhoud.
Modifier
.clickable { go() }
.padding(16.dp)Werk de status bij wanneer je tikt
Combineer clickable met state om aangepaste schakelaars te bouwen, zoals een uitvouwbare kaart die groter wordt wanneer je op de kop tikt.
Modifier.clickable { expanded = !expanded }Schakel clickable uit
De clickable-modifier accepteert ook een enabled-vlag. Stel deze in op false en het element reageert niet meer, net als een uitgeschakelde knop.
Modifier.clickable(enabled = isReady) { next() }combinedClickable voor meer mogelijkheden
Heb je ook lang indrukken of dubbeltikken nodig? Gebruik dan combinedClickable. Deze biedt naast onClick ook onLongClick en onDoubleClick.
Modifier.combinedClickable(
onClick = { open() },
onLongClick = { showMenu() }
)Knoppen tegenover clickable
Gebruik een echte Button voor duidelijke primaire acties. Gebruik clickable wanneer een willekeurig oppervlak, zoals een kaart, tikbaar moet zijn.
Houd tikdoelen groot genoeg
Kleine tekst met clickable kan moeilijk te raken zijn. Geef deze opvulling, zodat het tikdoel minstens ongeveer 48 dp hoog blijft.
Snelle controle
Je wilt dat een tik ergens op een rij in een lijst het detailscherm opent.
Samenvatting: maak alles tikbaar
Je hebt geleerd dat de clickable-modifier elke composable tikbaar maakt, met rimpelanimaties, labels en een enabled-vlag. Ook kaarten en rijen kunnen reageren. 🎉
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 “clickable op elke Composable” gratis?
Ja — de volledige tekst van “clickable op elke Composable” 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 “clickable op elke Composable”?
Maak elementen die geen knoppen zijn aantikbaar. 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 4 van 4.
Hoe lang duurt de les “clickable op elke Composable”?
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
- Button en onClick
- Tekst-, omlijnde en icoonknoppen
- Ingeschakelde, uitgeschakelde en laadstatussen
- clickable op elke Composable