Live previews med @Preview
Iterér på brugerfladen uden at bygge hele appen igen.
Live previews med @Preview er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Se brugerfladen uden at køre
Det er langsomt at bygge hele appen igen for at kontrollere én knap. @Preview-annotationen gengiver din Composable direkte i Android Studio. ⚡
Tilføj annotationen
Placér @Preview over en Composable, der ikke har obligatoriske parametre. Android Studio viser den derefter i designruden ved siden af din kode.
@Preview
@Composable
fun GreetingPreview() {
Greeting("Compose")
}Forhåndsvisninger kræver ingen argumenter
En Composable, der skal vises i forhåndsvisningen, skal kunne kaldes med ingen argumenter. Derfor laver du normalt en lille wrapper, der leverer eksempeldata.
Pak din rigtige Composable ind
Behold din rigtige Composable med parametre, og skriv derefter en lille wrapper til forhåndsvisning, der kalder den med faste værdier i designpanelet.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada")
}Navngiv den med en titel
Tilføj name for at navngive forhåndsvisningen i panelet. Det er nyttigt, når én fil viser flere forhåndsvisninger på én gang.
@Preview(name = "Dark card")
@Composable
fun DarkPreview() { /* ... */ }Vis systemdekorationer
Sæt showSystemUi til true for at gengive statuslinjen og hele enhedsrammen, så du ser Composable i en realistisk telefonskal.
@Preview(showSystemUi = true)
@Composable
fun ScreenPreview() { /* ... */ }Kun baggrunden
Hvis du kun vil have en overflade bag din brugerflade, kan du i stedet bruge showBackground. Den tilføjer en enkel baggrund uden hele enhedens ramme.
@Preview(showBackground = true)
@Composable
fun ItemPreview() { /* ... */ }Flere forhåndsvisninger på én gang
Sæt flere @Preview-annoteringer på én funktion for at sammenligne tilstande side om side, f.eks. lyst og mørkt tema eller små og store skrifttyper.
Forhåndsvis forskellige størrelser
Angiv widthDp og heightDp for at teste, hvordan din Composable ser ud på smalle eller brede skærme, uden at starte en emulator.
@Preview(widthDp = 320, heightDp = 200)
@Composable
fun NarrowPreview() { /* ... */ }Interaktiv forhåndsvisning
Klik på ikonet for tilstanden interactive i forhåndsvisningspanelet for at trykke og rulle i din brugerflade uden at køre hele appen. Det er praktisk til hurtige kontroller.
Forhåndsvisninger kommer ikke med i appen
Kode under @Preview er kun til udviklingsværktøjer. Den kommer aldrig med i den udgivne app, så du kan tilføje lige så mange forhåndsvisninger, som du har brug for.
Hurtig kontrol
En hurtig kontrol af, hvordan forhåndsvisninger fungerer.
Opsummering
Du kan nu arbejde hurtigt: tilføj @Preview, lever eksempeldata i en wrapper, og juster navn, størrelser og baggrunde for at se din brugerflade med det samme. 🎨
Lær Kotlin med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Live previews med @Preview” gratis?
Ja — hele teksten til “Live previews med @Preview” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Live previews med @Preview”?
Iterér på brugerfladen uden at bygge hele appen igen. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Jetpack Compose Academy?
Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Live previews med @Preview”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?
Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Skriv en @Composable-funktion
- Live previews med @Preview
- Kald Composables fra Composables
- setContent: Her begynder din brugerflade