Skriv en @Composable-funktion
Definér din egen genanvendelige UI-funktion.
Skriv en @Composable-funktion er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 1 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.
Det skal du bygge
I denne lektion skriver du din egen Composable fra bunden. Når du er færdig, kan du beskrive en del af brugerfladen med en enkelt Kotlin-funktion. 🚀
Det starter med @Composable
En Composable er blot en funktion, der er markeret med @Composable-annotationen. Mærket fortæller Compose, at funktionen udsender brugerflade i stedet for at returnere en værdi.
@Composable
fun Greeting() {
Text("Hello!")
}Navngiv den som en type
Composables, der udsender brugerflade, bruger navne i PascalCase, ligesom en klasse. Derfor skriver du Greeting, ikke greeting, for at vise, at det er en byggesten til brugerfladen.
De returnerer Unit
Din Composable returnerer ikke en værdi. Den udsender brugerflade ved at kalde andre Composables i sig, så returtypen er ganske enkelt Unit.
@Composable
fun Welcome() {
Text("Welcome aboard")
}Send data med parametre
Gør en Composable genanvendelig ved at tilføje parametre. Send et navn ind, så kan den samme funktion hilse på hvem som helst.
@Composable
fun Greeting(name: String) {
Text("Hello, " + name)
}Standardværdier hjælper
Giv parametre standardværdier, så kaldere kan udelade dem. Her er name som standard lig med World, så Greeting() stadig fungerer alene.
@Composable
fun Greeting(name: String = "World") {
Text("Hello, " + name)
}Indbyggede Composables
Du starter sjældent fra ingenting. Compose leveres med færdige dele som Text, Button og Image, som du kalder fra din egen funktion.
Importér det, du bruger
Når du kalder Text, tilføjer Android Studio en import af androidx.compose.material3.Text. Lad IDE'en importere automatisk, så du aldrig behøver gætte pakken.
Hold funktionerne små
Hver Composable bør beskrive én tydelig ting. En lille, fokuseret funktion er lettere at læse, genbruge og forhåndsvise end en enorm funktion.
Ingen returværdi, kun kald
I en Composable bygger og returnerer du ikke en widget. Du kalder ganske enkelt andre Composables fra top til bund, og Compose tegner dem i rækkefølge.
@Composable
fun Card() {
Text("Title")
Text("Subtitle")
}Det er stadig Kotlin
En Composable er i bund og grund almindelig Kotlin. Du kan bruge variabler, betingelser og løkker i den ligesom i enhver anden funktion.
@Composable
fun Status(online: Boolean) {
if (online) Text("Online")
else Text("Offline")
}Hurtigt tjek
Tid til et hurtigt tjek af, hvad der definerer en Composable.
Opsamling
Nu kan du skrive en Composable: markér den med @Composable, navngiv den i PascalCase, giv den parametre, og kald andre Composables for at udsende brugerflade. 🎉
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 “Skriv en @Composable-funktion” gratis?
Ja — hele teksten til “Skriv en @Composable-funktion” 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 “Skriv en @Composable-funktion”?
Definér din egen genanvendelige UI-funktion. 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 1 af 4.
Hvor lang tid tager lektionen “Skriv en @Composable-funktion”?
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