Android Academy · Leçon

Qu’est-ce qu’un composable ?

Des fonctions qui décrivent l’interface.

Qu’est-ce qu’un composable ? est une leçon Android 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 Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce qu'un composable ?

Avec Jetpack Compose, vous construisez les écrans en écrivant des fonctions plutôt qu'en chargeant des mises en page XML. Un composable est simplement une fonction Kotlin qui décrit une partie de votre interface utilisateur.

Vous marquez cette fonction avec l'annotation @Composable. Cela indique au compilateur Compose que cette fonction peut produire une interface utilisateur et appeler d'autres fonctions composables.

L'annotation @Composable

Ajouter @Composable au-dessus d'une fonction lui donne accès aux possibilités de Compose. À l'intérieur, vous pouvez appeler d'autres composables comme Text ou Column.

Par convention, les noms des fonctions composables commencent par une majuscule, comme les classes. Cela permet de repérer facilement les fonctions d'interface utilisateur dans votre code.

@Composable
fun Greeting() {
    Text("Hello, Compose!")
}

Interface utilisateur décrite en Kotlin

Un composable ne renvoie pas d'objet View. À la place, il produit une interface utilisateur comme effet secondaire lorsque Compose l'exécute. Vous décrivez simplement ce qui doit apparaître à l'écran.

On appelle cela un style déclaratif : vous indiquez à quoi ressemble l'interface utilisateur pour les données actuelles, et Compose détermine comment l'afficher.

@Composable
fun WelcomeMessage() {
    Text("Welcome back!")
}

Les composables appellent des composables

La véritable puissance vient de l'imbrication. Un composable peut appeler d'autres composables, ce qui vous permet de construire des écrans complexes à partir de petits éléments réutilisables.

Ici, un composable parent appelle un composable enfant. Compose les exécute de haut en bas et organise l'interface utilisateur produite.

@Composable
fun Header() {
    Text("My App")
}

@Composable
fun Screen() {
    Header()
}

Fonctions sans valeur de retour

La plupart des composables renvoient Unit, ce qui signifie qu'ils ne renvoient rien d'utile. Leur rôle est de produire l'interface utilisateur, et non de renvoyer une valeur.

Vous appelez donc un composable pour son effet sur l'écran, et non pour récupérer un résultat. Cela semble différent des fonctions ordinaires, mais cela devient rapidement naturel.

@Composable
fun Footer() {
    Text("\u00A9 2024 CoddyKit")
}

Transmettre des données comme paramètres

Les composables peuvent recevoir des paramètres, comme les fonctions Kotlin ordinaires. Le même composable peut ainsi afficher des données différentes.

Ici, Greeting accepte un name et l'affiche. Transmettre les données rend vos composables flexibles et réutilisables dans toute l'application.

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

Réutiliser un composable

Comme les composables sont des fonctions, vous pouvez appeler l'un d'eux plusieurs fois avec des arguments différents. Chaque appel produit sa propre copie de l'interface utilisateur.

C'est ainsi que vous évitez de vous répéter : écrivez l'interface une fois, puis réutilisez-la partout où vous en avez besoin.

@Composable
fun NameList() {
    Greeting("Ada")
    Greeting("Linus")
}

Où placer les composables

Vous placez les composables dans votre activité Android à l'aide de setContent. Ce bloc est le point d'entrée où Compose prend le contrôle de l'écran.

À l'intérieur de setContent, vous appelez votre composable principal, et tout ce qu'il produit devient l'interface utilisateur de votre application.

setContent {
    Greeting("World")
}

Principes de base de la recomposition

Lorsque les données lues par un composable changent, Compose réexécute cette fonction pour mettre à jour l'écran. Cette nouvelle exécution s'appelle la recomposition.

Vous ne mettez pas l'interface utilisateur à jour manuellement. Vous modifiez les données, et Compose recompose automatiquement les composables concernés. L'écran reste ainsi synchronisé avec votre état.

Garder des composables courts

Une bonne habitude consiste à faire en sorte que chaque composable ait une seule fonction clairement définie. Les composables courts et ciblés sont plus faciles à lire, à tester et à réutiliser.

Si une fonction devient trop grande, divisez-la en composables plus petits et appelez-les ensemble. Votre futur vous en remerciera.

@Composable
fun ProfileHeader(name: String) {
    Text(name)
}

Les importations que vous verrez

Les composables proviennent des bibliothèques Compose. Vous importerez souvent androidx.compose.runtime.Composable pour l'annotation et androidx.compose.material3.Text pour le texte.

Android Studio ajoute généralement ces importations pour vous. Savoir d'où elles proviennent est utile lorsqu'une importation manque.

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

Vérification rapide

Revoyons ce qui fait d'une fonction un composable.

Récapitulatif

Vous avez appris qu'un composable est une fonction Kotlin marquée avec @Composable qui décrit l'interface utilisateur de manière déclarative. Les composables peuvent recevoir des paramètres, appeler d'autres composables et portent des noms commençant par une majuscule.

Ils renvoient Unit et produisent l'interface utilisateur au lieu de renvoyer une valeur. Lorsque les données changent, Compose les recompose pour mettre à jour l'écran. Vous allez maintenant afficher du texte réel et empiler des vues avec Column.

Questions Fréquemment Posées

La leçon « Qu’est-ce qu’un composable ? » est-elle gratuite ?

Oui — le texte complet de « Qu’est-ce qu’un 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 « Qu’est-ce qu’un composable ? » ?

Des fonctions qui décrivent l’interface. 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 1 sur 4.

Combien de temps prend la leçon « Qu’est-ce qu’un 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

← Retour à Android Academy