Jetpack Compose Academy · Pelajaran

clickable pada Composable Apa Pun

Buat elemen non-button dapat diketuk.

clickable pada Composable Apa Pun adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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. 🎉

Pertanyaan yang Sering Diajukan

Apakah pelajaran “clickable pada Composable Apa Pun” gratis?

Ya — teks lengkap “clickable pada Composable Apa Pun” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “clickable pada Composable Apa Pun”?

Buat elemen non-button dapat diketuk. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “clickable pada Composable Apa Pun” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy