Prévisualisations et rechargement à chaud
Itérez rapidement grâce aux prévisualisations de Compose.
Prévisualisations et rechargement à chaud est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.
Aperçus lors de la conception
L’une des meilleures fonctionnalités de Compose est @Preview : vous pouvez voir une fonction composable s’afficher dans Android Studio sans exécuter l’application sur un appareil ou un émulateur.
L’annotation @Preview
Ajoutez @Preview au-dessus d’une fonction @Composable. Android Studio l’affiche dans le panneau de conception.
@Preview
@Composable
fun GreetingPreview() {
Greeting(name = "Preview")
}Les aperçus n’ont besoin d’aucun paramètre
Une fonction d’aperçu doit pouvoir être appelée avec aucun argument. Vous créez donc une fonction composable d’encapsulation qui fournit des données d’exemple, puis vous affichez cette encapsulation en aperçu.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada", followers = 42)
}Nommer les fonctions d’aperçu
Par convention, les fonctions d’encapsulation d’aperçu portent le nom de la fonction composable suivi du suffixe Preview, par exemple GreetingPreview. Elles sont ainsi faciles à trouver et leur nom indique qu’elles ne sont pas utilisées en production.
Paramètres d’aperçu
@Preview accepte des arguments permettant d’ajuster l’affichage, tels que showBackground, name et widthDp.
@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
Greeting(name = "Hi")
}showBackground
Par défaut, un aperçu possède un arrière-plan transparent. Transmettez showBackground = true pour afficher une surface opaque, ce qui facilite la lecture du texte pendant la conception.
Plusieurs aperçus
Vous pouvez empiler plusieurs annotations @Preview sur une même fonction afin de voir différentes configurations côte à côte — par exemple une largeur petite et une largeur grande.
@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
HomeScreen()
}Aperçu interactif
Android Studio propose un mode interactif pour les aperçus. Il vous permet de cliquer sur des boutons et de déclencher des changements d’état directement dans l’aperçu, sans déployer l’application.
Modification en direct / rechargement à chaud
Avec la modification en direct, les changements apportés au corps des fonctions composables apparaissent presque instantanément dans l’aperçu, et même sur un appareil en cours d’exécution — sans avoir besoin d’une reconstruction complète. Cela accélère considérablement le cycle de conception.
Les aperçus sont gratuits
Les fonctions d’aperçu sont retirées de votre version de production. Ajouter de nombreux aperçus n’a donc aucun coût à l’exécution. Utilisez-les généreusement pour documenter et tester visuellement chaque fonction composable.
Un exemple complet
Voici une fonction composable avec son aperçu. Ouvrez le panneau de conception pour voir son affichage instantané.
@Composable
fun Badge(label: String) {
Text(text = label, color = Color.White)
}
@Preview(showBackground = true)
@Composable
fun BadgePreview() {
Badge(label = "NEW")
}Vérification rapide
Pourquoi une fonction @Preview ne doit-elle accepter aucun paramètre ?
Récapitulatif
Les aperçus accélèrent le développement avec Compose :
- Ajoutez
@Previewau-dessus d’une fonction composable sans argument. - Utilisez des options telles que
showBackgroundetwidthDp. - Empilez plusieurs aperçus ; utilisez le mode interactif et la modification en direct pour itérer rapidement.
Apprends Kotlin avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 36
- Leçons
- 152
Questions Fréquemment Posées
La leçon « Prévisualisations et rechargement à chaud » est-elle gratuite ?
Oui — le texte complet de « Prévisualisations et rechargement à chaud » 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 « Prévisualisations et rechargement à chaud » ?
Itérez rapidement grâce aux prévisualisations de Compose. 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 4 sur 4.
Combien de temps prend la leçon « Prévisualisations et rechargement à chaud » ?
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
- Qu'est-ce que Jetpack Compose ?
- Votre premier composable
- Texte, image et bouton
- Prévisualisations et rechargement à chaud