Écrire une fonction @Composable
Définissez votre propre fonction d’interface réutilisable.
Écrire une fonction @Composable est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 You Will Build
In this lesson you will write your own Composable from scratch. By the end, you can describe a piece of UI with a single Kotlin function. 🚀
It Starts With @Composable
A Composable is just a function marked with the @Composable annotation. That tag tells Compose this function emits UI instead of returning a value.
@Composable
fun Greeting() {
Text("Hello!")
}Name It Like a Type
Composables that emit UI use PascalCase names, like a class. So you write Greeting, not greeting, to signal it is a UI building block.
They Return Unit
Your Composable does not return a value. It emits UI by calling other Composables inside it, so its return type is simply Unit.
@Composable
fun Welcome() {
Text("Welcome aboard")
}Pass Data With Parameters
Make a Composable reusable by adding parameters. Pass in a name and the same function can greet anyone you like.
@Composable
fun Greeting(name: String) {
Text("Hello, " + name)
}Default Values Help
Give parameters defaults so callers can skip them. Here name defaults to World, so Greeting() still works on its own.
@Composable
fun Greeting(name: String = "World") {
Text("Hello, " + name)
}Built-in Composables
You rarely start from nothing. Compose ships ready-made pieces like Text, Button, and Image that you call from inside your own function.
Import What You Use
When you call Text, Android Studio adds an import for androidx.compose.material3.Text. Let the IDE auto-import so you never guess the package.
Keep Functions Small
Each Composable should describe one clear thing. A small focused function is easier to read, reuse, and preview than a giant one.
No Return, Just Calls
Inside a Composable you do not build and return a widget. You simply call other Composables top to bottom, and Compose draws them in order.
@Composable
fun Card() {
Text("Title")
Text("Subtitle")
}It Is Still Kotlin
A Composable is normal Kotlin underneath. You can use variables, conditions, and loops inside it just like any other function.
@Composable
fun Status(online: Boolean) {
if (online) Text("Online")
else Text("Offline")
}Quick Check
Time for a quick check on what defines a Composable.
Recap
You can now write a Composable: tag it with @Composable, name it in PascalCase, take parameters, and call other Composables to emit UI. 🎉
Questions Fréquemment Posées
La leçon « Écrire une fonction @Composable » est-elle gratuite ?
Oui — le texte complet de « Écrire 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 « Écrire une fonction @Composable » ?
Définissez votre propre fonction d’interface réutilisable. 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 1 sur 4.
Combien de temps prend la leçon « Écrire 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
- Écrire une fonction @Composable
- Aperçus en direct avec @Preview
- Appeler des Composables depuis des Composables
- setContent : le point de départ de votre interface