clickable en cualquier Composable
Haga que los elementos que no son botones puedan tocarse.
clickable en cualquier Composable es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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. 🎉
Preguntas frecuentes
¿La lección «clickable en cualquier Composable» es gratis?
Sí — el texto completo de «clickable en cualquier Composable» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «clickable en cualquier Composable»?
Haga que los elementos que no son botones puedan tocarse. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «clickable en cualquier Composable»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Button y onClick
- Botones Text, Outlined e Icon
- Estados habilitado, deshabilitado y de carga
- clickable en cualquier Composable