Anatomie d’une fonction @Composable
Lisez un élément Composable et repérez ce qui le rend particulier.
Anatomie d’une fonction @Composable est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
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.
Questions Fréquemment Posées
La leçon « Anatomie d’une fonction @Composable » est-elle gratuite ?
Oui — le texte complet de « Anatomie d’une fonction @Composable » 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 « Anatomie d’une fonction @Composable » ?
Lisez un élément Composable et repérez ce qui le rend particulier. 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 3 sur 4.
Combien de temps prend la leçon « Anatomie d’une fonction @Composable » ?
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
- Ce que Compose remplace : adieu XML
- Configurer Android Studio pour Compose
- Anatomie d’une fonction @Composable
- Exécuter votre première app sur l’émulateur