0Pricing
Android Academy · Leçon

Votre premier composable

Créez et prévisualisez une fonction composable.

Votre premier composable est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Votre premier composable

Un composable est simplement une fonction Kotlin marquée avec @Composable. Écrivons-en un qui salue un utilisateur par son nom.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

L’annotation @Composable

L’annotation @Composable indique au compilateur que cette fonction peut produire une interface et appeler d’autres composables. Sans elle, vous ne pouvez pas appeler Text, Button ou d’autres fonctions d’interface.

Convention de nommage

Les composables qui produisent une interface sont nommés avec des noms en PascalCase, comme Greeting ou ProfileCard — à l’image d’une classe. Cela indique « cette fonction dessine quelque chose » plutôt que « cette fonction renvoie une valeur ».

Les paramètres pilotent l’interface

Un composable accepte des paramètres comme toute fonction. Ces paramètres sont vos entrées. Des arguments différents produisent des interfaces différentes.

@Composable
fun Greeting(name: String) {
    Text(text = "Welcome, $name")
}
// Greeting("Sam") and Greeting("Mia") render different text

Appeler des composables

Les composables peuvent uniquement être appelés depuis d’autres composables. Vous composez un écran en imbriquant des appels.

@Composable
fun WelcomeScreen() {
    Greeting(name = "Ada")
    Greeting(name = "Grace")
}

Héberger avec setContent

Pour afficher réellement des composables, une Activity appelle setContent { } dans onCreate. La lambda constitue la racine de votre interface Compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WelcomeScreen()
        }
    }
}

Les composables renvoient Unit

Remarquez que les composables ne renvoient pas d’objet d’interface. Leur type de retour est Unit et ils produisent l’interface comme effet secondaire de leur appel. Vous créez l’interface en les appelant, et non en renvoyant des valeurs.

Paramètres par défaut

Les arguments par défaut de Kotlin sont très pratiques ici. Donnez une valeur par défaut à un paramètre afin que les appelants puissent l’omettre.

@Composable
fun Greeting(name: String = "Guest") {
    Text(text = "Hello, $name!")
}
// Greeting() shows "Hello, Guest!"

Réutiliser les composables

Comme ce sont des fonctions, les composables sont réutilisables. Définissez Greeting une seule fois, puis appelez-le n’importe où avec des noms différents. C’est ainsi que vous évitez de dupliquer le code de l’interface.

Gardez-les petits

Les bons composables sont petits et ciblés. Un composable doit décrire un seul bloc logique de l’interface. Composez les écrans plus grands en combinant de petits composables.

Assembler le tout

Voici un premier composable complet intégré à une activité. Son exécution sur un appareil affiche « Hello, Compose! ».

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Compose")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Vérification rapide

Que permet de faire l’annotation @Composable à une fonction ?

Récapitulatif

Vous avez écrit votre premier composable. Retenez les points suivants :

  • Marquez les fonctions d’interface avec @Composable.
  • Utilisez des noms en PascalCase.
  • Les paramètres sont les entrées qui structurent l’interface.
  • setContent { } héberge les composables dans une activité.

Questions Fréquemment Posées

La leçon « Votre premier composable » est-elle gratuite ?

Oui — le texte complet de « Votre premier 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 Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Votre premier composable » ?

Créez et prévisualisez une fonction composable. Tu pratiques Android 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 Android Academy ?

Aucune expérience préalable n'est requise. Android 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 2 sur 4.

Combien de temps prend la leçon « Votre premier 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 Android Academy ?

Oui. Chaque leçon Android 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

  1. Qu'est-ce que Jetpack Compose ?
  2. Votre premier composable
  3. Texte, image et bouton
  4. Prévisualisations et rechargement à chaud
← Retour à Android Academy