Previews und Hot Reload
Arbeiten Sie mit Compose-Previews schnell iterativ.
Previews und Hot Reload ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.
Vorschauen zur Entwurfszeit
Eine der besten Funktionen von Compose ist @Preview: Sie können ein Composable in Android Studio rendern lassen, ohne die App auf einem Gerät oder Emulator auszuführen.
Die Annotation @Preview
Fügen Sie @Preview oberhalb einer @Composable-Funktion ein. Android Studio rendert sie im Entwurfsbereich.
@Preview
@Composable
fun GreetingPreview() {
Greeting(name = "Preview")
}Vorschauen benötigen keine Parameter
Eine Vorschaufunktion muss ohne Argumente aufrufbar sein. Erstellen Sie daher ein umschließendes Composable, das Beispieldaten bereitstellt, und zeigen Sie dieses Wrapper-Composable in der Vorschau an.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada", followers = 42)
}Vorschaufunktionen benennen
Konventionell werden Wrapper für Vorschauen nach dem Composable benannt und erhalten das Suffix Preview, z. B. GreetingPreview. Dadurch sind sie leicht zu finden und es wird deutlich, dass sie nicht in der Produktion verwendet werden.
Vorschauparameter
@Preview akzeptiert Argumente, mit denen Sie die Darstellung anpassen können, etwa showBackground, name und widthDp.
@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
Greeting(name = "Hi")
}showBackground
Standardmäßig hat eine Vorschau einen transparenten Hintergrund. Übergeben Sie showBackground = true, um eine undurchsichtige Fläche zu rendern. Dadurch ist Text beim Entwerfen besser lesbar.
Mehrere Vorschauen
Sie können mehrere @Preview-Annotationen auf eine Funktion setzen, um verschiedene Konfigurationen nebeneinander zu sehen — beispielsweise eine kleine und eine große Breite.
@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
HomeScreen()
}Interaktive Vorschau
Android Studio bietet für Vorschauen einen Interactive Mode. Damit können Sie direkt in der Vorschau auf Schaltflächen klicken und Zustandsänderungen auslösen, ohne die App bereitzustellen.
Live Edit / Hot Reload
Mit Live Edit werden Änderungen an den Composable-Körpern nahezu sofort in der Vorschau und sogar auf einem laufenden Gerät angezeigt — ein vollständiger Neuaufbau ist nicht erforderlich. Dadurch wird der Entwurfszyklus erheblich beschleunigt.
Vorschauen sind kostenlos
Vorschaufunktionen werden aus Ihrem Release-Build entfernt. Daher verursachen viele Vorschauen zur Laufzeit keine Kosten. Verwenden Sie sie großzügig, um jedes Composable visuell zu dokumentieren und zu testen.
Ein vollständiges Beispiel
Hier sehen Sie ein Composable mit seiner Vorschau. Öffnen Sie den Entwurfsbereich, um die sofortige Darstellung zu sehen.
@Composable
fun Badge(label: String) {
Text(text = label, color = Color.White)
}
@Preview(showBackground = true)
@Composable
fun BadgePreview() {
Badge(label = "NEW")
}Kurzer Check
Warum darf eine @Preview-Funktion keine Parameter annehmen?
Zusammenfassung
Vorschauen beschleunigen die Compose-Entwicklung:
- Fügen Sie
@Previewoberhalb eines Composables ohne Argumente ein. - Verwenden Sie Optionen wie
showBackgroundundwidthDp. - Stapeln Sie mehrere Vorschauen und verwenden Sie den Interactive Mode sowie Live Edit für schnelle Iterationen.
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
- 36
- Lektionen
- 152
Häufig gestellte Fragen
Ist die Lektion „Previews und Hot Reload“ kostenlos?
Ja — der vollständige Text von „Previews und Hot Reload“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Previews und Hot Reload“?
Arbeiten Sie mit Compose-Previews schnell iterativ. Du übst Android 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 Android Academy zu starten?
Keine Vorkenntnisse erforderlich. Android 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 4 von 4.
Wie lange dauert die Lektion „Previews und Hot Reload“?
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 Android Academy-Lektion Code schreiben und ausführen?
Ja. Jede Android 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
- Was ist Jetpack Compose?
- Ihr erstes Composable
- Text, Bild und Button
- Previews und Hot Reload