Jetpack Compose Academy · leksjon

Column: Stable ting loddrett

Plasser underordnede elementer ovenfra og ned.

Leksjon 1 av 413 trinn

Column: Stable ting loddrett er en gratis leksjon i Jetpack Compose Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Jetpack Compose Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.

Stable vertikalt

Når du vil plassere underordnede elementer ovenfra og ned, bruker du Column. Den er Compose sitt foretrukne oppsett for vertikale stabler. 📚

Din første Column

En Column tar imot en avsluttende lambda. Alle composable-funksjoner du kaller inni den, blir underordnede elementer og tegnes i den rekkefølgen du skriver dem.

Column {
    Text("First")
    Text("Second")
}

Rekkefølgen går ovenfra og ned

Underordnede elementer stables i kilderekkefølge. Den første composable-funksjonen ligger øverst, den neste under den, og så videre nedover skjermen.

Bland ulike underordnede elementer

En Column kan inneholde hvilke som helst composable-funksjoner, ikke bare Text. Buttons, Images og til og med andre Columns stables fint inni den.

Column {
    Text("Title")
    Button(onClick = {}) { Text("Go") }
}

Standardstørrelse: Tilpass til innholdet

Som standard er en Column bare så høy og bred som de underordnede elementene krever. Den krymper for å tilpasse seg innholdet, med mindre du angir noe annet.

Fyll bredden

Legg til en Modifier for å endre størrelsen. fillMaxWidth gjør at Column strekker seg over hele skjermbredden.

Column(modifier = Modifier.fillMaxWidth()) {
    Text("Wide column")
}

Avstand mellom underordnede elementer

Bruk verticalArrangement sammen med spacedBy for å lage jevne mellomrom mellom alle underordnede elementer. Du trenger ikke manuell padding på hvert element.

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("A")
    Text("B")
}

Juster underordnede elementer sidelengs

Angi horizontalAlignment for å stille opp de underordnede elementene. CenterHorizontally trekker dem alle til midten av Column-bredden.

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("Centered")
}

Columns ruller ikke ennå

En vanlig Column ruller ikke. Hvis de underordnede elementene går utenfor skjermen, blir de beskåret. Den passer derfor best til korte, faste lister.

Legg til rulling ved behov

For lengre innhold kan du legge verticalScroll til Column-modifikatoren. Nå ruller hele stabelen som én enhet.

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    Text("Long content")
}

Bygg opp ekte skjermer med nøsting

På ekte skjermer nøstes Columns inni andre Columns. En ytre Column inneholder seksjoner, og hver seksjon er sin egen lille Column med detaljer.

Rask sjekk

La oss bekrefte hvordan en Column plasserer de underordnede elementene.

Oppsummering: Column

Du har lært om Column: den stabler underordnede elementer ovenfra og ned i rekkefølge, tilpasser seg innholdet som standard, og bruker arrangement, justering og modifikatorer til å angi størrelse og avstand.

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
30
Leksjoner
120

Ofte stilte spørsmål

Er leksjonen «Column: Stable ting loddrett» gratis?

Ja – hele teksten i «Column: Stable ting loddrett» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Jetpack Compose Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Column: Stable ting loddrett»?

Plasser underordnede elementer ovenfra og ned. Du øver på Jetpack Compose 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 Jetpack Compose Academy?

Ingen tidligere erfaring er nødvendig. Jetpack Compose 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 «Column: Stable ting loddrett»?

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 Jetpack Compose Academy-leksjonen?

Ja. Alle Jetpack Compose 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

  1. Column: Stable ting loddrett
  2. Row: Plassere ting ved siden av hverandre
  3. Box: Lag og overlapp
  4. Plassering og justering
← Tilbake til Jetpack Compose Academy