Anatomia de uma Função @Composable
Leia uma Composable e identifique o que a torna especial.
Anatomia de uma Função @Composable é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 3 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.
What Is a Composable?
A Composable is just a Kotlin function that describes a piece of UI. Call it, and Compose draws that UI on screen. It is the building block of everything. 🧱
The @Composable Annotation
The magic marker is @Composable above the function. It tells the Compose compiler this function can emit UI and may be recomposed when data changes.
@Composable
fun Greeting() {
Text("Hello!")
}Name It Like a UI Piece
By convention, Composable names use PascalCase nouns like Greeting or ProfileCard, not verbs. The name describes the thing on screen, not an action.
It Returns Unit
A Composable usually returns nothing (Unit). Instead of returning UI, it emits it by calling other Composables inside its body. The side effect is the drawing.
Built-In Composables
Compose ships ready-made Composables like Text, Button, Image, and Icon. You combine these to build your own, so you rarely start from a blank canvas.
@Composable
fun Welcome() {
Text("Welcome to Compose")
}Parameters Pass In Data
Composables take parameters just like any function. Pass data in, and the UI reflects it. This is how the same component shows different content.
@Composable
fun Greeting(name: String) {
Text("Hello, " + name)
}The Modifier Parameter
Most Composables accept a modifier to control size, padding, and layout. By convention it is the first optional parameter, ready for you to customize.
Composables Call Composables
A Composable can only be called from another Composable. This rule lets Compose track the tree of UI and recompose the right parts when state changes.
Keep Them Small
Aim for small, focused Composables that do one thing. Tiny pieces are easier to reuse, preview, and combine into bigger screens later on.
Prefer No Side Effects
A good Composable is predictable: same inputs, same UI. Avoid surprises like network calls in the body, since Compose may run it many times.
Compose Builds a Tree
As Composables call each other, they form a UI tree. Compose walks this tree to draw the screen and to update only the branches that changed.
Quick Check
Let's verify what marks a function as a UI builder.
Recap: The Composable
A Composable is a Kotlin function with @Composable that emits UI, takes parameters, accepts a modifier, and calls other Composables to build a tree.
Perguntas Frequentes
A aula “Anatomia de uma Função @Composable” é grátis?
Sim — o texto completo de “Anatomia de uma Função @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 “Anatomia de uma Função @Composable”?
Leia uma Composable e identifique o que a torna especial. 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 3 de 4.
Quanto tempo leva a aula “Anatomia de uma Função @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
- O que o Compose Substitui: Adeus ao XML
- Configurando o Android Studio para Compose
- Anatomia de uma Função @Composable
- Executando seu Primeiro Aplicativo no Emulador