Column: stapla saker vertikalt
Placera underordnade element uppifrån och ned.
Column: stapla saker vertikalt är en gratis lektion i Jetpack Compose Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Jetpack Compose Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Jetpack Compose Academy innehåller totalt 4 lektioner.
Stapla vertikalt
När Ni vill placera barn uppifrån och ned använder Ni Column. Det är Compose standardlayout för vertikala staplar. 📚
Er första Column
En Column tar emot en avslutande lambda. Varje Composable-funktion Ni anropar i den blir ett barn, som ritas i den ordning Ni skriver dem.
Column {
Text("First")
Text("Second")
}Ordningen går uppifrån och ned
Barn staplas i source order. Den första Composable-funktionen hamnar högst upp, nästa under den och så vidare nedåt på skärmen.
Blanda olika barn
En Column kan innehålla any Composables, inte bara Text. Knappar, bilder och även andra Columns staplas utan problem i den.
Column {
Text("Title")
Button(onClick = {}) { Text("Go") }
}Standardstorlek: anpassa efter innehållet
Som standard är en Column bara så tall och bred som dess barn behöver. Den krymper för att omsluta innehållet om Ni inte anger något annat.
Fyll bredden
Lägg till en Modifier för att ändra storleken. fillMaxWidth gör att Column sträcker sig över hela skärmens bredd.
Column(modifier = Modifier.fillMaxWidth()) {
Text("Wide column")
}Avstånd mellan barn
Använd verticalArrangement tillsammans med spacedBy för att skapa jämna mellanrum mellan alla barn. Ni behöver inte lägga till manuell padding på varje objekt.
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
Text("A")
Text("B")
}Justera barn i sidled
Ange horizontalAlignment för att rikta in barnen. CenterHorizontally placerar dem alla i mitten av Column-bredden.
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("Centered")
}Columns rullar inte ännu
En vanlig Column rullar not. Om barnen sträcker sig utanför skärmen beskärs de, så den passar bäst för korta, fasta listor.
Lägg till rullning vid behov
För längre innehåll lägger Ni till verticalScroll i Column-modifieraren. Nu rullar hela stapeln som en enda enhet.
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
Text("Long content")
}Kapsla för riktiga skärmar
Riktiga skärmar nest Columns i andra Columns. En yttre Column innehåller sektioner, och varje sektion är en egen liten Column med detaljer.
Snabbkontroll
Nu bekräftar vi hur en Column placerar sina barn.
Sammanfattning: Column
Ni har lärt Er om Column: den staplar barn uppifrån och ned i ordning, anpassar sig efter innehållet som standard och använder arrangemang, justering och modifierare för att ändra storlek och avstånd.
Lär dig Kotlin med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Column: stapla saker vertikalt” gratis?
Ja – hela texten till ”Column: stapla saker vertikalt” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Jetpack Compose Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Jetpack Compose Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Column: stapla saker vertikalt”?
Placera underordnade element uppifrån och ned. Ni övar på Jetpack Compose Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Jetpack Compose Academy?
Du behöver inga förkunskaper. Utbildningen i Jetpack Compose Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Column: stapla saker vertikalt”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Jetpack Compose Academy-lektionen?
Ja. Varje Jetpack Compose Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Column: stapla saker vertikalt
- Row: placera saker bredvid varandra
- Box: lägg lager och överlappa
- Arrangemang och justering