Aperçus en direct avec @Preview
Faites évoluer l’interface sans reconstruire toute l’app.
Aperçus en direct avec @Preview est une leçon Jetpack Compose 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 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.
See UI Without Running
Rebuilding the whole app to check one button is slow. The @Preview annotation renders your Composable right inside Android Studio. ⚡
Add the Annotation
Put @Preview above a Composable that takes no required parameters. Android Studio then shows it in the design pane beside your code.
@Preview
@Composable
fun GreetingPreview() {
Greeting("Compose")
}Previews Need No Arguments
A previewed Composable must be callable with no arguments. That is why you usually make a small wrapper that supplies sample data.
Wrap Your Real Composable
Keep your real Composable parameterized, then write a tiny preview wrapper that calls it with fixed values for the design pane.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada")
}Name It With a Title
Add name to label the preview in the panel. Helpful when one file shows several previews at once.
@Preview(name = "Dark card")
@Composable
fun DarkPreview() { /* ... */ }Show System Decorations
Set showSystemUi to true to render the status bar and full device frame, so you see the Composable in a realistic phone shell.
@Preview(showSystemUi = true)
@Composable
fun ScreenPreview() { /* ... */ }Just the Background
If you only want a surface behind your UI, use showBackground instead. It adds a plain backdrop without the whole device chrome.
@Preview(showBackground = true)
@Composable
fun ItemPreview() { /* ... */ }Many Previews at Once
Stack several @Preview annotations on one function to compare states side by side, like light and dark or small and large fonts.
Preview Different Sizes
Pass widthDp and heightDp to test how your Composable looks on narrow or wide screens without launching an emulator.
@Preview(widthDp = 320, heightDp = 200)
@Composable
fun NarrowPreview() { /* ... */ }Interactive Preview
Click the interactive mode icon in the preview pane to tap and scroll your UI without a full app run. Great for quick checks.
Previews Stay Out of the App
Code under @Preview is for tooling only. It never ships in your released app, so add as many previews as you find useful.
Quick Check
A quick check on how previews work.
Recap
You can now iterate fast: add @Preview, supply sample data in a wrapper, and tune name, sizes, and backgrounds to see your UI instantly. 🎨
Questions Fréquemment Posées
La leçon « Aperçus en direct avec @Preview » est-elle gratuite ?
Oui — le texte complet de « Aperçus en direct avec @Preview » 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 « Aperçus en direct avec @Preview » ?
Faites évoluer l’interface sans reconstruire toute l’app. 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 2 sur 4.
Combien de temps prend la leçon « Aperçus en direct avec @Preview » ?
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