Disposizione e allineamento
Posizioni e distribuisca gli elementi figli con precisione.
Disposizione e allineamento è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Two Words, Two Jobs
Layout control comes down to arrangement and alignment. They sound similar but they do different jobs. Let's untangle them. 🧭
Arrangement: Along the Main Axis
Arrangement controls spacing along the layout's main axis: vertical for a Column, horizontal for a Row.
Alignment: Across the Cross Axis
Alignment controls position on the other axis: horizontal in a Column, vertical in a Row. It lines children up sideways.
Grouping at One End
Arrangement.Top, Center, and Bottom pack children together at one end of a Column, leaving the rest as empty space.
Column(verticalArrangement = Arrangement.Center) {
Text("A")
Text("B")
}Spreading Children Out
Use SpaceBetween, SpaceAround, or SpaceEvenly to distribute extra space among children instead of bunching them up.
Row(horizontalArrangement = Arrangement.SpaceEvenly) {
Text("A")
Text("B")
Text("C")
}SpaceBetween vs SpaceEvenly
SpaceBetween hugs the edges with no outer gaps, while SpaceEvenly adds equal gaps everywhere, including before the first and after the last child.
Fixed Gaps with spacedBy
For a consistent gap, use Arrangement.spacedBy. It inserts the exact distance you give between every adjacent child.
Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
Text("A")
Text("B")
}Column's Cross-Axis Alignment
In a Column the cross axis is horizontal, so horizontalAlignment chooses Start, CenterHorizontally, or End for the children.
Column(horizontalAlignment = Alignment.End) {
Text("Right side")
}Row's Cross-Axis Alignment
In a Row the cross axis is vertical, so verticalAlignment picks Top, CenterVertically, or Bottom for the children.
Row(verticalAlignment = Alignment.Bottom) {
Text("Aligned bottom")
}Combine Both for Layout
You usually set both at once: arrangement spaces children along the main axis while alignment positions them on the cross axis.
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) { Text("Dead center") }Effect Needs Extra Space
Arrangement only shows when the container is bigger than its children. A wrap-content Column has no spare room to redistribute.
Quick Check
Let's confirm which axis each setting controls.
Recap: Arrangement & Alignment
You learned the split: arrangement spaces children along the main axis, alignment positions them on the cross axis. Combine both for precise layouts.
Domande Frequenti
La lezione «Disposizione e allineamento» è gratuita?
Sì — il testo completo di «Disposizione e allineamento» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «Disposizione e allineamento»?
Posizioni e distribuisca gli elementi figli con precisione. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Disposizione e allineamento»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Column: impilare verticalmente gli elementi
- Row: disporre gli elementi affiancati
- Box: sovrapporre e stratificare
- Disposizione e allineamento