Extraer Composables reutilizables
Refactorice la pantalla en componentes limpios.
Extraer Composables reutilizables 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.
Time to Refactor
Your card works, but it is one long function. Now you will split it into small, named Composables that are easier to read and reuse. 🧩
Spot Repeated Patterns
The three stat blocks are nearly identical. Repeated shapes like that are a strong signal to extract a single reusable Composable.
Extract StatBlock
Pull one stat into its own function. Pass the differing values, the count and label, in as parameters.
@Composable
fun StatBlock(count: String, label: String) {
Column { Text(count); Text(label) }
}Reuse It Three Times
Now the stats Row is just three clean calls. The same StatBlock renders different data each time, with zero duplication.
Row {
StatBlock("128", "Posts")
StatBlock("4.2k", "Followers")
StatBlock("180", "Following")
}Extract the Header
Group the avatar, name, and bio into a ProfileHeader Composable. The big screen function gets shorter and far easier to scan.
@Composable
fun ProfileHeader(name: String, bio: String) {
Column { /* avatar, name, bio */ }
}Name Things Clearly
Good Composable names describe what you see: ProfileHeader, StatBlock, FollowButton. Clear names make the card read like a sentence.
Pass Data In
Keep components flexible by accepting parameters instead of hard-coding values. The same ProfileHeader can show any user.
ProfileHeader(name = "Ada Lovelace", bio = "Building apps.")Hoist the Click Out
Let the parent decide what a tap does. Expose an onFollowClick lambda parameter so FollowButton stays generic.
@Composable
fun FollowButton(onClick: () -> Unit) {
Button(onClick = onClick) { Text("Follow") }
}Assemble the Screen
The top-level ProfileCard now just composes the pieces in order. Each child Composable owns one job, which is the Compose way.
Column {
ProfileHeader(name, bio)
StatsRow(stats)
FollowButton(onFollow)
}Add a Modifier Parameter
Truly reusable Composables accept a Modifier parameter, defaulting to Modifier. Callers can then size and pad them from outside.
@Composable
fun StatBlock(
count: String,
label: String,
modifier: Modifier = Modifier
) { /* ... */ }Clean and Reusable
Your one giant function is now several small, focused, reusable Composables. This structure scales as your app grows in complexity. 🎉
Quick Check
What makes a Composable reusable across different data?
Recap: You Shipped a Card
You refactored the profile card into small reusable Composables with parameters and a Modifier slot. You now have a clean, scalable screen built end to end.
Preguntas frecuentes
¿La lección «Extraer Composables reutilizables» es gratis?
Sí — el texto completo de «Extraer Composables reutilizables» 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 «Extraer Composables reutilizables»?
Refactorice la pantalla en componentes limpios. 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 «Extraer Composables reutilizables»?
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