clickable em Qualquer Composable
Torne elementos que não são botões capazes de receber toques.
clickable em Qualquer Composable é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em 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. 🎉
Perguntas Frequentes
A aula “clickable em Qualquer Composable” é grátis?
Sim — o texto completo de “clickable em Qualquer Composable” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.
O que vou aprender em “clickable em Qualquer Composable”?
Torne elementos que não são botões capazes de receber toques. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Jetpack Compose Academy?
Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “clickable em Qualquer Composable”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Jetpack Compose Academy?
Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Button e onClick
- Botões de Texto, Contornados e de Ícone
- Estados Habilitado, Desabilitado e de Carregamento
- clickable em Qualquer Composable