Column: vertikal placering och konfigurering av behållaren i Compose

Vad är Column i Jetpack Compose

Column — är en Composable-funktion som accepterar valfria parametrar: modifier, verticalArrangement, horizontalAlignment och content — en lambda med ColumnScope. Inuti Column placeras underordnade Composable-funktioner uppifrån och ned i deklarationsordning. Columnens höjd är lika med summan av höjderna på underordnade element plus utrymmet som anges av Arrangement. Bredd — enligt maximal bredd på det underordnade elementet med hänsyn till Alignment.

Column är en osynlig behållare: den har ingen egen bakgrund eller kant som standard. Om bakgrund behövs — lägg till Modifier.background() till själva Column. Till skillnad från LazyColumn visar Column alla underordnade element samtidigt och stöder inte virtualisering. Detta innebär att Column endast är lämplig för små datamängder — upp till 10-15 element. För långa listor använder du LazyColumn.

ColumnScope — är en receiver för Column content-lambda. Den tillhandahåller ytterligare modifierare som bara fungerar inuti Column: weight(), align(), alignByBaseline(). Dessa modifierare är meningslösa utanför Column eftersom de förlitar sig på det vertikala arrangemangets specificitet. Till exempel, Modifier.align(Alignment.CenterHorizontally) justerar det underordnade elementet horisontellt till mitten av Column.

Parametrar för Column: Arrangement, Alignment, Modifier

VerticalArrangement bestämmer hur det vertikala utrymmet fördelas mellan element. Tillgängliga värden: Arrangement.Top (standard), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Om Columnens höjd är större än summan av elementens höjder fördelar Arrangement det lediga utrymmet. Om elementen upptar hela höjden — påverkar Arrangement inte.

HorizontalAlignment anger horisontell justering av varje underordnat element. Alignment.Start (standard, LTR), CenterHorizontally, End. Alignment verkar på varje element oberoende: om ett element är smalt och ett annat brett — kommer det första att justeras, det andra kan överskrida Columnens gränser. Alignment fungerar bara om Column har fast bredd eller fillMaxWidth.

Modifier för Column: Column accepterar en Modifier som tillämpas på själva behållaren. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — alla standardmodifierare fungerar. Egenskap: Modifier.height(IntrinsicSize.Min) tvingar Column att beräkna minimal höjd baserat på underordnade element med hänsyn till Intrinsic measurement.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Topp", modifier = Modifier.background(Color.Cyan))
        Text("Mitten", modifier = Modifier.background(Color.Magenta))
        Text("Botten", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column anpassar höjd till innehåll
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Kort text")
        Text("En mycket lång text som kommer att lindas inuti kolumnen")
    }
}

Column weight: fördelning av utrymme mellan element

Modifier.weight() — är en ColumnScope-modifierare som fördelar ledigt vertikalt utrymme mellan Column-element proportionellt enligt angivna vikter. Om Column upptar 400dp höjd och underordnade element totalt 100dp, delas de återstående 300dp mellan weight-element. Ett element med weight(2f) får dubbelt så mycket utrymme som ett element med weight(1f).

fill — den andra parametern för weight: weight(weight: Float, fill: Boolean = true). Om fill = true (standard) sträcks elementet över hela tillgängliga höjden. Om fill = false — upptar elementet bara sin intrinsiska höjd, resterande utrymme förblir tomt. Detta är användbart när elementet ska tryckas mot en sida, men weight bara anger proportionen för fördelning av tomt utrymme.

Begränsningar för weight: weight fungerar bara i Column med fast höjd eller fillMaxHeight(). Om Columnens höjd bestäms av underordnade element (wrap content) har vikter ingen mening — det finns inget ledigt utrymme att fördela. Weight kan inte heller kombineras med Modifier.height() på samma element — de är i konflikt och weight ignoreras.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Tar 1/6 av höjden (vikt 1 av summa 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Tar 2/6 av höjden
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Tar 3/6 av höjden
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: när ska man använda vad

Column visar alla underordnade element omedelbart. Om det finns fler än 10-15 element skapar Column en betydande belastning på komposition och mätning. LazyColumn å andra sidan renderar bara synliga element och återanvänder osynliga. För långa listor, listor med tusentals element, oändliga listor eller chattar — är LazyColumn obligatorisk.

När Column är bättre: skärmar med formulär (3-10 fält), profil kort, vertikala kolumner med ikoner, menyer. Column stöder också IntrinsicSize, vilket är användbart för adaptiv höjd. Dessutom är Column lättare att felsöka — ingen virtualisering, alla element är synliga i Layout Inspector. För statiskt UI är Column rätt val.

LazyColumn ger: item caching, nyckelbaserad identitet, animering av tillägg/borttagning (animateItemPlacement), sticky headers. Om listan innehåller element av olika typer (olika viewType) — använd LazyColumn med sealed class i items. Column stöder inte sticky headers (de måste emuleras via scrollable Column). LazyColumn stöder också LazyVerticalGrid när GridCells används.

Praktiska exempel på användning av Column

Låt oss titta på skärmen användarprofil, där Column används som huvudbehållare för avatar, namn, bio och åtgärdsknappar. Här anpassar Column med IntrinsicSize.Min sig till innehållet, och weight används för att fördela utrymme mellan sektioner.

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // Avatar
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // Namn
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Åtgärdsknappar
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Meddelande") }
                OutlinedButton(onClick = { }) { Text("Följ") }
            }
        }
    }
}

I exemplet använder Column Arrangement.spacedBy(8.dp) för jämna mellanrum mellan element. horizontalAlignment = CenterHorizontally centrerar avatar, namn och bio. Row inuti Column — en nästlad behållare för knappar i en rad. En sådan kombination av Column (vertikal placering) och Row (horisontell placering) är ett typiskt mönster för UI-bygge i Compose.