Android Academy · leksjon

Deres første composable

Opprett og forhåndsvis en composable-funksjon.

Leksjon 2 av 413 trinn

Deres første composable er en gratis leksjon i Android Academy på CoddyKit. Dette er leksjon 2 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.

Deres første komponerbare funksjon

En komponerbar funksjon er ganske enkelt en Kotlin-funksjon merket med @Composable. La oss skrive en som hilser på en bruker ved navn.

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

@Composable-annotasjonen

Annotasjonen @Composable forteller kompilatoren at denne funksjonen kan produsere UI og kan kalle andre komponerbare funksjoner. Uten den kan De ikke kalle Text, Button eller andre UI-funksjoner.

Navnekonvensjon

Komponerbare funksjoner som produserer UI, navngis med substantiver i PascalCase, for eksempel Greeting eller ProfileCard — på samme måte som en klasse. Dette signaliserer «denne tegner noe» i stedet for «denne returnerer en verdi».

Parametere styrer UI-et

En komponerbar funksjon tar parametere på samme måte som alle andre funksjoner. Disse parameterne er funksjonens inndata. Ulike argumenter gir ulikt UI.

@Composable
fun Greeting(name: String) {
    Text(text = "Welcome, $name")
}
// Greeting("Sam") and Greeting("Mia") render different text

Kalle komponerbare funksjoner

Komponerbare funksjoner kan bare kalles fra andre komponerbare funksjoner. De setter sammen en skjerm ved å nøste kall.

@Composable
fun WelcomeScreen() {
    Greeting(name = "Ada")
    Greeting(name = "Grace")
}

Være vert med setContent

For faktisk å vise komponerbare funksjoner kaller en Activity setContent { } i onCreate. Lambdaen er roten i Compose-UI-et.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WelcomeScreen()
        }
    }
}

Komponerbare funksjoner returnerer Unit

Legg merke til at komponerbare funksjoner ikke returnerer et UI-objekt. De har returtypen Unit og produserer UI som en bieffekt av at de kalles. De bygger UI ved å kalle funksjoner, ikke ved å returnere verdier.

Standardparametere

Kotlins standardargumenter fungerer svært godt her. Gi en parameter en standardverdi, slik at den som kaller funksjonen, kan utelate den.

@Composable
fun Greeting(name: String = "Guest") {
    Text(text = "Hello, $name!")
}
// Greeting() shows "Hello, Guest!"

Gjenbruke komponerbare funksjoner

Fordi de er funksjoner, kan komponerbare funksjoner gjenbrukes. Definer Greeting én gang og kall den hvor som helst med ulike navn. Slik unngår De å duplisere UI-kode.

Hold dem små

Gode komponerbare funksjoner er små og fokuserte. Én komponerbar funksjon bør beskrive én logisk del av UI-et. Bygg større skjermer ved å kombinere små komponerbare funksjoner.

Sette det hele sammen

Her er en komplett første komponerbar funksjon koblet til en aktivitet. Når De kjører den på en enhet, vises «Hello, Compose!».

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Compose")
        }
    }
}

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

Hurtigsjekk

Hva gjør annotasjonen @Composable det mulig for en funksjon å gjøre?

Besvar den i den interaktive leksjonen

Oppsummering

De har skrevet Deres første komponerbare funksjon. Husk:

Merk UI-funksjoner med @Composable.
Bruk navn i PascalCase.
Parametere er inndataene som former UI-et.
setContent { } er vert for komponerbare funksjoner i en aktivitet.

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 «Deres første composable» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Android Academy, inkludert «Deres første composable», 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 «Deres første composable»?

Opprett og forhåndsvis en composable-funksjon. 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 2 av 4.

Hvor lang tid tar leksjonen «Deres første composable»?

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