Fila de estadísticas y botón Follow
Añada detalles interactivos a la tarjeta.
Fila de estadísticas y botón Follow es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 3 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.
Add the Interactive Details
With the header done, you will add the lower half: a row of stats and a follow button that responds to taps. This is where the card comes alive. ⚡
One Stat Block
Each stat is two stacked Texts: a big number and a small label. A tiny Column holds them together as one neat block.
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("128")
Text("Posts")
}Emphasize the Number
The count should pop while the label stays quiet. Give the number a bold style and the label a smaller one.
Text("128", style = MaterialTheme.typography.titleMedium)
Text("Posts", style = MaterialTheme.typography.labelSmall)Put Stats in a Row
Three stat blocks sit side by side, so wrap them in a Row. Each block becomes a child laid out left to right.
Row {
StatBlock("128", "Posts")
StatBlock("4.2k", "Followers")
StatBlock("180", "Following")
}Space the Stats Evenly
Spread the blocks across the card with Arrangement.SpaceEvenly on the Row, so the gaps are equal and balanced.
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) { /* ... */ }Add the Follow Button
Below the stats, add a Button. Its onClick lambda runs your code the moment the user taps it.
Button(onClick = { /* follow */ }) {
Text("Follow")
}Make It Full Width
A primary action button reads best across the whole card. Add fillMaxWidth so it spans edge to edge.
Button(
onClick = { /* follow */ },
modifier = Modifier.fillMaxWidth()
) { Text("Follow") }Track the Follow State
The button should toggle between Follow and Following. Hold that with remember and mutableStateOf so the UI reacts to taps.
var following by remember { mutableStateOf(false) }Flip State on Tap
Inside onClick, flip the boolean. Compose notices the state changed and redraws the button with new text automatically.
Button(onClick = { following = !following }) {
Text(if (following) "Following" else "Follow")
}Wire It Into the Card
Drop the stats Row and the Button below the header inside the outer Column. The full card now reads top to bottom in order.
An Interactive Card
You now have stats, a follow button, and live state. Tapping really changes the screen, which is the heart of a declarative Compose UI. 🎉
Quick Check
What lets the button text update when tapped?
Recap: Stats and Action
You built a Row of evenly spaced stat blocks and a full-width follow button driven by remembered state. Next you will refactor it all into clean, reusable pieces.
Aprende Kotlin con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «Fila de estadísticas y botón Follow» es gratis?
Sí — el texto completo de «Fila de estadísticas y botón Follow» 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 «Fila de estadísticas y botón Follow»?
Añada detalles interactivos a la tarjeta. 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 3 de 4.
¿Cuánto tiempo toma la lección «Fila de estadísticas y botón Follow»?
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
- Esbozar el layout de una tarjeta de perfil
- Sección de avatar, nombre y biografía
- Fila de estadísticas y botón Follow
- Extraer Composables reutilizables