Android Academy · leksjon

Hva en composable er

Funksjoner som beskriver brukergrensesnittet.

Leksjon 1 av 413 trinn

Hva en composable er er en gratis leksjon i Android Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Android Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Android Academy inneholder totalt 4 leksjoner.

Hva er en composable

I Jetpack Compose bygger du skjermer ved å skrive funksjoner, ikke ved å blåse opp XML-layouts. En composable er ganske enkelt en Kotlin-funksjon som beskriver en del av brukergrensesnittet.

Du merker en slik funksjon med annotasjonen @Composable. Det forteller Compose-kompilatoren at funksjonen kan generere brukergrensesnitt og kan kalle andre composable-funksjoner.

Annotasjonen @Composable

Når du legger til @Composable over en funksjon, får du tilgang til Compose-funksjonene. Inne i den kan du kalle andre composables, som Text eller Column.

Etter konvensjonen starter navn på composable-funksjoner med stor bokstav, akkurat som klassenavn. Det gjør det enkelt å få øye på UI-funksjoner i koden.

@Composable
fun Greeting() {
    Text("Hello, Compose!")
}

UI beskrevet i Kotlin

En composable returnerer ikke et View-objekt. I stedet genererer den UI som en sideeffekt når Compose kjører den. Du beskriver ganske enkelt hva som skal vises på skjermen.

Dette kalles en deklarativ stil: du angir hvordan UI-et skal se ut for de aktuelle dataene, og Compose finner ut hvordan det skal tegnes.

@Composable
fun WelcomeMessage() {
    Text("Welcome back!")
}

Composables kaller composables

Den virkelige styrken kommer fra nøsting. En composable kan kalle andre composables, slik at du kan bygge komplekse skjermer av små, gjenbrukbare deler.

Her kaller en overordnet composable en underordnet composable. Compose kjører dem ovenfra og ned og plasserer UI-et de genererer.

@Composable
fun Header() {
    Text("My App")
}

@Composable
fun Screen() {
    Header()
}

Funksjoner uten returverdier

De fleste composables returnerer Unit, som betyr at de ikke returnerer noe nyttig. Oppgaven deres er å generere UI, ikke å gi tilbake en verdi.

Du kaller derfor en composable på grunn av effekten den har på skjermen, ikke for å hente ut et resultat. Dette føles annerledes enn vanlige funksjoner, men blir raskt naturlig.

@Composable
fun Footer() {
    Text("\u00A9 2024 CoddyKit")
}

Sende data som parametere

Composables kan ta imot parametere, akkurat som vanlige Kotlin-funksjoner. Dermed kan den samme composable-en vise ulike data.

Her tar Greeting imot en name og viser den. Når du sender inn data, blir composables fleksible og gjenbrukbare i hele appen.

@Composable
fun Greeting(name: String) {
    Text("Hello, " + name + "!")
}

Gjenbruke en composable

Fordi composables er funksjoner, kan du kalle en av dem mange ganger med ulike argumenter. Hvert kall genererer sin egen kopi av UI-et.

Slik unngår du å gjenta deg selv: skriv UI-et én gang, og bruk det på nytt der du trenger det.

@Composable
fun NameList() {
    Greeting("Ada")
    Greeting("Linus")
}

Hvor composables ligger

Du plasserer composables i Android-aktiviteten ved hjelp av setContent. Denne blokken er inngangspunktet der Compose tar over skjermen.

Inne i setContent kaller du den overordnede composable-en, og alt den genererer, blir appens UI.

setContent {
    Greeting("World")
}

Grunnleggende om recomposition

Når dataene en composable leser, endres, kjører Compose funksjonen på nytt for å oppdatere skjermen. Denne kjøringen på nytt kalles recomposition.

Du oppdaterer ikke UI-et manuelt. Du endrer dataene, og Compose utfører automatisk recomposition av de berørte composables. Slik holdes skjermen synkronisert med tilstanden din.

Hold composables små

En god vane er å la hver composable ha én tydelig oppgave. Små, fokuserte composables er enklere å lese, teste og gjenbruke.

Hvis en funksjon blir for stor, deler du den opp i mindre composables og kaller dem sammen. Ditt fremtidige jeg vil takke deg.

@Composable
fun ProfileHeader(name: String) {
    Text(name)
}

Importer du vil se

Composables kommer fra Compose-bibliotekene. Du importerer ofte androidx.compose.runtime.Composable for annotasjonen og androidx.compose.material3.Text for tekst.

Android Studio legger vanligvis til disse importene for deg. Når du vet hvor de kommer fra, er det enklere å forstå hva som mangler når en import ikke finnes.

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

Kunnskapssjekk

La oss repetere hva som gjør en funksjon til en composable.

Besvar den i den interaktive leksjonen

Oppsummering

Du har lært at en composable er en Kotlin-funksjon merket med @Composable som beskriver UI på en deklarativ måte. Composables kan ta imot parametere, kalle andre composables og ha navn som starter med stor bokstav.

De returnerer Unit og genererer UI i stedet for å returnere en verdi. Når dataene endres, utfører Compose recomposition for å oppdatere skjermen. Deretter skal du vise ekte tekst og stable visninger med Column.

Gratis å komme i gang

Lær deg Kotlin med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 36
Leksjoner: 152

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Hva en composable er» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Android Academy, inkludert «Hva en composable er», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Android Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Hva en composable er»?

Funksjoner som beskriver brukergrensesnittet. Du øver på Android Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Android Academy?

Ingen tidligere erfaring er nødvendig. Android Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Hva en composable er»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Android Academy-leksjonen?

Ja. Alle Android Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Android Academy