Extraire des Composables réutilisables
Refactorisez l’écran en composants clairs.
Extraire des Composables réutilisables 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.
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.
Questions Fréquemment Posées
La leçon « Extraire des Composables réutilisables » est-elle gratuite ?
Oui — le texte complet de « Extraire des Composables réutilisables » 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 « Extraire des Composables réutilisables » ?
Refactorisez l’écran en composants clairs. 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 « Extraire des Composables réutilisables » ?
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
- Esquisser la disposition d’une carte de profil
- Section avatar, nom et biographie
- Ligne de statistiques et bouton Suivre
- Extraire des Composables réutilisables