Her Composable'da clickable
Düğme olmayan öğeleri dokunulabilir hâle getirin.
Her Composable'da clickable, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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. 🎉
Yapay zeka eğitmeniyle Kotlin öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Her Composable'da clickable” dersi ücretsiz mi?
Evet — “Her Composable'da clickable” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
“Her Composable'da clickable” dersinde ne öğreneceğim?
Düğme olmayan öğeleri dokunulabilir hâle getirin. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Her Composable'da clickable” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Button ve onClick
- Text, Outlined ve Icon Düğmeleri
- Etkin, Devre Dışı ve Yükleniyor Durumları
- Her Composable'da clickable