Anatomía de una función @Composable
Lea un Composable e identifique qué lo hace especial.
Anatomía de una función @Composable 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.
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.
Preguntas frecuentes
¿La lección «Anatomía de una función @Composable» es gratis?
Sí — el texto completo de «Anatomía de una función @Composable» 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 «Anatomía de una función @Composable»?
Lea un Composable e identifique qué lo hace especial. 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 «Anatomía de una función @Composable»?
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
- Qué reemplaza Compose: adiós a XML
- Configurar Android Studio para Compose
- Anatomía de una función @Composable
- Ejecutar su primera app en el emulador