Jetpack Compose Academy · Leçon

clickable sur n’importe quel Composable

Rendez les éléments qui ne sont pas des boutons interactifs au toucher.

clickable sur n’importe quel Composable est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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

Questions Fréquemment Posées

La leçon « clickable sur n’importe quel Composable » est-elle gratuite ?

Oui — le texte complet de « clickable sur n’importe quel Composable » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « clickable sur n’importe quel Composable » ?

Rendez les éléments qui ne sont pas des boutons interactifs au toucher. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?

Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « clickable sur n’importe quel Composable » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?

Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Jetpack Compose Academy