Jetpack Compose Academy · Lezione

Anteprime live con @Preview

Iteri sull'interfaccia senza ricostruire l'intera app.

Anteprime live con @Preview è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

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. 🎨

Domande Frequenti

La lezione «Anteprime live con @Preview» è gratuita?

Sì — il testo completo di «Anteprime live con @Preview» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.

Cosa imparerò in «Anteprime live con @Preview»?

Iteri sull'interfaccia senza ricostruire l'intera app. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Jetpack Compose Academy?

Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Anteprime live con @Preview»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?

Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Jetpack Compose Academy