Jetpack Compose Academy · Lektion

Column: Stabl ting lodret

Placér underordnede elementer fra top til bund.

Lektion 1 af 413 trin

Column: Stabl ting lodret 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.

Stabling lodret

Når du vil placere underordnede elementer fra top til bund, bruger du Column. Den er Composes foretrukne layout til lodrette stakke. 📚

Din første Column

En Column modtager en afsluttende lambda. Alle composables, du kalder i den, bliver underordnede elementer og tegnes i den rækkefølge, du skriver dem.

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

Rækkefølgen går fra top til bund

Underordnede elementer stables i kildekodens rækkefølge. Den første Composable placeres øverst, den næste under den og så videre ned ad skærmen.

Bland forskellige underordnede elementer

En Column kan indeholde alle slags composables, ikke kun Text. Knapper, Images og selv andre Columns stables alle fint i den.

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

Standardstørrelse: Tilpas til indholdet

Som standard er en Column kun så høj og bred, som dens underordnede elementer kræver. Den tilpasser sig sit indhold, medmindre du angiver andet.

Udfyld bredden

Tilføj en Modifier for at ændre størrelsen. fillMaxWidth får Column til at strække sig over hele skærmens bredde.

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

Afstand mellem underordnede elementer

Brug verticalArrangement sammen med spacedBy for at skabe ens afstande mellem alle underordnede elementer. Du behøver ikke tilføje manuel indvendig afstand til hvert element.

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

Justér underordnede elementer sideværts

Indstil horizontalAlignment for at rette de underordnede elementer ind. CenterHorizontally trækker dem alle ind på midten af Columnens bredde.

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

Columns ruller ikke endnu

En almindelig Column kan ikke rulle. Hvis de underordnede elementer går ud over skærmen, bliver de beskåret, så den egner sig bedst til korte lister med fast indhold.

Tilføj rulning efter behov

Ved længere indhold skal du knytte verticalScroll til Columnens modifier. Nu ruller hele stakken som én samlet enhed.

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

Indlejring til rigtige skærme

Rigtige skærme indlejrer Columns i andre Columns. En ydre Column indeholder sektioner, og hver sektion er sin egen lille Column med detaljer.

Hurtigt tjek

Lad os bekræfte, hvordan en Column placerer sine underordnede elementer.

Opsummering: Column

Du har lært om Column: den stabler underordnede elementer fra top til bund i rækkefølge, tilpasser sig som standard indholdet og bruger placering, justering og modifikatorer til at bestemme størrelse og afstand.

Gratis at komme i gang

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 “Column: Stabl ting lodret” gratis?

Ja — hele teksten til “Column: Stabl ting lodret” 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 “Column: Stabl ting lodret”?

Placér underordnede elementer fra top til bund. 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 “Column: Stabl ting lodret”?

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

  1. Column: Stabl ting lodret
  2. Row: Placér ting side om side
  3. Box: Lag og overlap
  4. Arrangement og justering
← Tilbage til Jetpack Compose Academy