Android Academy · leksjon

Column, Row og Box

Plasser composable-komponenter i vanlige oppsett.

Leksjon 1 av 413 trinn

Column, Row og Box 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.

Plassere komponerbare elementer

For å plassere komponerbare elementer i forhold til hverandre gir Compose deg tre sentrale layout-elementer: Column, Row og Box.

Column: vertikal stabling

Column stabler underordnede elementer vertikalt, ovenfra og ned.

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

Row: horisontal stabling

Row plasserer underordnede elementer side ved side, fra venstre mot høyre.

Row {
    Text("Left")
    Text("Middle")
    Text("Right")
}

Box: overlappende elementer

Box stabler underordnede elementer oppå hverandre, som lag. Senere elementer tegnes over tidligere elementer. Dette passer godt for merker, overlegg og bakgrunner.

Box {
    Image(
        painter = painterResource(R.drawable.photo),
        contentDescription = null
    )
    Text("Caption")
}

Underordnede elementer er innholdslambdaer

Hvert layout-element tar imot en avsluttende content lambda. Komponerbare elementer du kaller inne i den, blir underordnede elementer. Det finnes ingen XML — underordnede elementer er ganske enkelt funksjonskall.

Kapsle layout-elementer i hverandre

Layout-elementer kan fritt kapsles i hverandre. Plasser en Row inni en Column for å bygge en rutenettlignende struktur eller en liste med rader.

Column {
    Row {
        Text("A")
        Text("B")
    }
    Row {
        Text("C")
        Text("D")
    }
}

Column kontra LinearLayout

Hvis du har brukt XML, tilsvarer Column en vertikal LinearLayout, mens Row tilsvarer en horisontal. Box tilsvarer en enkel FrameLayout.

Standardstørrelse

Som standard er et layout-element bare så stort som de underordnede elementene (wrap content). Du kan få det til å fylle den tilgjengelige plassen med modifikatorer som Modifier.fillMaxSize(), som gjennomgås i neste leksjon.

contentAlignment i Box

Box kan justere alle de underordnede elementene med contentAlignment. Du kan for eksempel sentrere alt.

Box(contentAlignment = Alignment.Center) {
    Text("Centered")
}

Velge riktig element

Velg basert på retningen: Column for vertikal retning, Row for horisontal retning og Box for overlappende elementer eller sentrering av ett enkelt element. De fleste skjermer kombinerer alle tre.

Sette det sammen

Et lite profil-layout som bruker alle tre.

@Composable
fun Profile() {
    Column {
        Box(contentAlignment = Alignment.Center) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = null
            )
        }
        Row {
            Text("Posts ")
            Text("Followers")
        }
    }
}

Rask sjekk

Hvilket layout-element stabler de underordnede elementene oppå hverandre (slik at de overlapper)?

Besvar den i den interaktive leksjonen

Oppsummering

Tre sentrale layout-elementer:

Column — vertikal stabling.
Row — horisontal stabling.
Box — overlappende lag; contentAlignment sentrerer innholdet.

De kan fritt kapsles i hverandre for å bygge alle typer skjermer.

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 «Column, Row og Box» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Android Academy, inkludert «Column, Row og Box», 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 «Column, Row og Box»?

Plasser composable-komponenter i vanlige oppsett. 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 «Column, Row og Box»?

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