clickable für jede Composable
Machen Sie Elemente ohne Button-Funktion antippbar.
clickable für jede Composable ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Anything Can Be Tappable
Sometimes you want a whole card or row to respond to taps, not a button. The clickable modifier makes any composable react. 👆
The clickable Modifier
Add Modifier.clickable to any element and pass an onClick lambda. The element now handles taps just like a button.
Text(
"Open profile",
modifier = Modifier.clickable { open() }
)Clicks Get a Ripple
By default clickable adds a Material ripple, giving instant visual feedback so the user sees their tap registered.
Box(Modifier.clickable { toggle() }) {
Text("Tap this box")
}Make Whole Cards Tappable
The pattern shines on list items: put clickable on the row's container so a tap anywhere opens the detail screen.
Row(Modifier.clickable { openItem(id) }) {
Text(item.title)
}Add a Content Description
For accessibility, pass an onClickLabel describing what the tap does, so screen readers announce the action clearly.
Modifier.clickable(
onClickLabel = "Open profile"
) { open() }Order in the Chain Matters
Place clickable before padding to make the padded area tappable, or after it to limit taps to the inner content.
Modifier
.clickable { go() }
.padding(16.dp)Toggle State on Tap
Pair clickable with state to build custom toggles, like an expandable card that grows when the header is tapped.
Modifier.clickable { expanded = !expanded }Disable a clickable
The clickable modifier also takes an enabled flag. Set it false and the element stops responding, just like a disabled button.
Modifier.clickable(enabled = isReady) { next() }combinedClickable for More
Need long press or double tap too? Reach for combinedClickable, which exposes onLongClick and onDoubleClick alongside onClick.
Modifier.combinedClickable(
onClick = { open() },
onLongClick = { showMenu() }
)Buttons vs clickable
Use a real Button for clear primary actions; reach for clickable when an arbitrary surface, like a card, needs to be tappable.
Keep Targets Big Enough
Small text with clickable can be hard to hit. Give it padding so the touch target stays at least about 48dp tall.
Quick Check
You want a tap anywhere on a list row to open its detail screen.
Recap: Tap Anything
You learned the clickable modifier turns any composable tappable, with ripples, labels, and an enabled flag. Cards and rows can react too. 🎉
Häufig gestellte Fragen
Ist die Lektion „clickable für jede Composable“ kostenlos?
Ja — der vollständige Text von „clickable für jede Composable“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „clickable für jede Composable“?
Machen Sie Elemente ohne Button-Funktion antippbar. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „clickable für jede Composable“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Button und onClick
- Text-, Outlined- und Icon-Buttons
- Aktivierte, deaktivierte und ladende Zustände
- clickable für jede Composable