Jetpack Compose Academy · Aula

Extraindo Composables Reutilizáveis

Refatore a tela em componentes organizados.

Extraindo Composables Reutilizáveis é 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.

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.

Perguntas Frequentes

A aula “Extraindo Composables Reutilizáveis” é grátis?

Sim — o texto completo de “Extraindo Composables Reutilizáveis” é 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 “Extraindo Composables Reutilizáveis”?

Refatore a tela em componentes organizados. 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 “Extraindo Composables Reutilizáveis”?

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

← Voltar para Jetpack Compose Academy