clickable w dowolnym Composable
Spraw, aby elementy niebędące przyciskami reagowały na dotknięcie
clickable w dowolnym Composable to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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. 🎉
Często zadawane pytania
Czy lekcja „clickable w dowolnym Composable” jest bezpłatna?
Tak — pełny tekst „clickable w dowolnym Composable” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „clickable w dowolnym Composable”?
Spraw, aby elementy niebędące przyciskami reagowały na dotknięcie Ćwiczysz Jetpack Compose Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Jetpack Compose Academy?
Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „clickable w dowolnym Composable”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Jetpack Compose Academy?
Tak. Każda lekcja Jetpack Compose Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Button i onClick
- Przyciski tekstowe, obrysowane i ikonowe
- Stany aktywny, nieaktywny i wczytywania
- clickable w dowolnym Composable