Live-Previews mit @Preview
Arbeiten Sie an der UI, ohne die gesamte App neu zu erstellen.
Live-Previews mit @Preview ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
See UI Without Running
Das gesamte Projekt neu zu bauen, um nur einen Button zu testen, dauert zu lange. Die @Preview-Annotation rendert deine Composable-Funktion direkt in Android Studio. ⚡
Add the Annotation
Füge @Preview über einer Composable-Funktion ein, die keine erforderlichen Parameter hat. Android Studio zeigt sie daraufhin im Design-Bereich neben deinem Code an.
@Preview
@Composable
fun GreetingPreview() {
Greeting("Compose")
}Previews Need No Arguments
Ein in der Vorschau angezeigter Composable-Inhalt muss ohne Argumente aufrufbar sein. Aus diesem Grund erstellen Sie normalerweise einen kleinen Wrapper, der Beispieldaten bereitstellt.
Wrap Your Real Composable
Behalte dein echtes Composable parametrisiert und schreibe dann einen winzigen Vorschau-Wrapper, der es für den Design-Bereich mit festen Werten aufruft.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada")
}Name It With a Title
Füge Name hinzu, um die Vorschau im Panel zu beschriften. Hilfreich, wenn eine Datei mehrere Vorschauen gleichzeitig anzeigt.
@Preview(name = "Dark card")
@Composable
fun DarkPreview() { /* ... */ }Show System Decorations
Setzen Sie showSystemUi auf true, um die Statusleiste und den vollständigen Geräterahmen zu rendern, sodass Sie die Composable in einer realistischen Telefonhülle sehen.
@Preview(showSystemUi = true)
@Composable
fun ScreenPreview() { /* ... */ }Just the Background
Wenn du nur eine Oberfläche hinter deiner Benutzeroberfläche wünschst, verwende stattdessen showBackground. Damit wird ein einfacher Hintergrund hinzugefügt, ohne den gesamten Geräterahmen.
@Preview(showBackground = true)
@Composable
fun ItemPreview() { /* ... */ }Many Previews at Once
Stapeln Sie mehrere @Preview-Annotationen auf eine Funktion, um Zustände wie hellen und dunklen Modus oder kleine und große Schriftarten direkt nebeneinander zu vergleichen.
Preview Different Sizes
Übergebe widthDp und heightDp, um zu testen, wie dein Composable auf schmalen oder breiten Bildschirmen aussieht, ohne einen Emulator zu starten.
@Preview(widthDp = 320, heightDp = 200)
@Composable
fun NarrowPreview() { /* ... */ }Interactive Preview
Klicken Sie im Vorschaubereich auf das Symbol für den interaktiven Modus, um ohne vollständigen App-Durchlauf auf Ihrer Benutzeroberfläche zu tippen und zu blättern. Ideal für schnelle Überprüfungen.
Previews Stay Out of the App
Code unter @Preview ist nur für das Tooling bestimmt. Er wird niemals in Ihrer veröffentlichten App ausgeliefert, fügen Sie also so viele Previews hinzu, wie Sie nützlich finden.
Quick Check
Ein kurzer Test, wie Vorschauen funktionieren.
Recap
Sie können jetzt schnell iterieren: Fügen Sie @Preview hinzu, stellen Sie Beispieldaten in einem Wrapper bereit und passen Sie Name, Größen und Hintergründe an, um Ihre Benutzeroberfläche sofort zu sehen. 🎨
Lerne Kotlin mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „Live-Previews mit @Preview“ kostenlos?
Ja — der vollständige Text von „Live-Previews mit @Preview“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Live-Previews mit @Preview“?
Arbeiten Sie an der UI, ohne die gesamte App neu zu erstellen. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Live-Previews mit @Preview“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Eine @Composable-Funktion schreiben
- Live-Previews mit @Preview
- Composables aus Composables aufrufen
- setContent: Wo Ihre UI beginnt