Column: verticale plaatsing en configuratie van de container in Compose

Wat is Column in Jetpack Compose

Column — is een Composable-functie die optionele parameters accepteert: modifier, verticalArrangement, horizontalAlignment en content — een lambda met ColumnScope. Binnen Column worden onderliggende Composable-functies van boven naar beneden geplaatst in de volgorde van declaratie. De hoogte van Column is gelijk aan de som van de hoogten van onderliggende elementen plus de ruimte bepaald door Arrangement. Breedte — volgens de maximale breedte van het onderliggende element rekening houdend met Alignment.

Column is een onzichtbare container: het heeft standaard geen eigen achtergrond of rand. Als een achtergrond nodig is — voeg Modifier.background() toe aan Column zelf. In tegenstelling tot LazyColumn geeft Column alle onderliggende elementen tegelijk weer en ondersteunt het geen virtualisatie. Dit betekent dat Column alleen geschikt is voor kleine datasets — tot 10-15 elementen. Voor lange lijsten gebruik je LazyColumn.

ColumnScope — is een receiver voor de content-lambda van Column. Het biedt extra modifiers die alleen binnen Column werken: weight(), align(), alignByBaseline(). Deze modifiers hebben geen betekenis buiten Column omdat ze vertrouwen op de specificiteit van verticale plaatsing. Bijvoorbeeld, Modifier.align(Alignment.CenterHorizontally) lijnt het onderliggende element horizontaal uit in het midden van Column.

Parameters van Column: Arrangement, Alignment, Modifier

VerticalArrangement bepaalt hoe de verticale ruimte tussen elementen wordt verdeeld. Beschikbare waarden: Arrangement.Top (standaard), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Als de hoogte van Column groter is dan de som van de hoogtes van elementen, verdeelt Arrangement de vrije ruimte. Als elementen de hele hoogte innemen — heeft Arrangement geen effect.

HorizontalAlignment stelt de horizontale uitlijning van elk onderliggend element in. Alignment.Start (standaard, LTR), CenterHorizontally, End. Alignment werkt onafhankelijk op elk element: als een element smal is en een ander breed — wordt de eerste uitgelijnd, de tweede kan buiten de grenzen van Column vallen. Alignment werkt alleen als Column een vaste breedte of fillMaxWidth heeft.

Modifier voor Column: Column accepteert een Modifier die op de container zelf wordt toegepast. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — alle standaard modifiers werken. Bijzonderheid: Modifier.height(IntrinsicSize.Min) dwingt Column om de minimale hoogte te berekenen op basis van onderliggende elementen rekening houdend met Intrinsic measurement.

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

    // IntrinsicSize: Column past hoogte aan inhoud aan
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Korte tekst")
        Text("Een zeer lange tekst die in de kolom wordt omwikkeld")
    }
}

Column weight: ruimteverdeling tussen elementen

Modifier.weight() — is een ColumnScope-modifier die vrije verticale ruimte tussen Column-elementen proportioneel verdeelt volgens opgegeven gewichten. Als Column 400dp hoogte inneemt en onderliggende elementen in totaal 100dp, dan worden de resterende 300dp verdeeld tussen weight-elementen. Een element met weight(2f) krijgt twee keer zoveel ruimte als een element met weight(1f).

fill — de tweede parameter van weight: weight(weight: Float, fill: Boolean = true). Als fill = true (standaard), wordt het element uitgerekt tot de volledige beschikbare hoogte. Als fill = false — neemt het element alleen zijn intrinsieke hoogte in, de resterende ruimte blijft leeg. Dit is handig wanneer het element tegen een kant moet worden gedrukt, maar weight alleen de verhouding van lege ruimteverdeling bepaalt.

Beperkingen van weight: weight werkt alleen in Column met vaste hoogte of fillMaxHeight(). Als de hoogte van Column wordt bepaald door onderliggende elementen (wrap content), hebben gewichten geen zin — er is geen vrije ruimte om te verdelen. Ook kan weight niet worden gecombineerd met Modifier.height() op hetzelfde element — ze conflicteren en weight wordt genegeerd.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Neemt 1/6 van hoogte (gewicht 1 van som 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Neemt 2/6 van hoogte
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Neemt 3/6 van hoogte
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: wanneer wat te gebruiken

Column geeft alle onderliggende elementen tegelijk weer. Als er meer dan 10-15 elementen zijn, veroorzaakt Column een aanzienlijke belasting op compositie en meting. LazyColumn daarentegen rendert alleen zichtbare elementen en hergebruikt onzichtbare. Voor lange lijsten, lijsten met duizenden elementen, oneindige lijsten of chats — is LazyColumn verplicht.

Wanneer Column beter is: schermen met formulieren (3-10 velden), profielkaarten, verticale kolommen met pictogrammen, menu's. Column ondersteunt ook IntrinsicSize, wat handig is voor adaptieve hoogte. Bovendien is Column gemakkelijker te debuggen — geen virtualisatie, alle elementen zijn zichtbaar in Layout Inspector. Voor statische UI is Column de juiste keuze.

LazyColumn biedt: item caching, key-based identity, animatie van toevoegen/verwijderen (animateItemPlacement), sticky headers. Als de lijst elementen van verschillende typen bevat (verschillende viewType) — gebruik dan LazyColumn met sealed class in items. Column ondersteunt geen sticky headers (ze moeten worden geëmuleerd via scrollable Column). LazyColumn ondersteunt ook LazyVerticalGrid bij gebruik van GridCells.

Praktische voorbeelden van Column-gebruik

Laten we het gebruikersprofiel-scherm bekijken, waar Column wordt gebruikt als hoofcontainer voor avatar, naam, bio en actieknoppen. Hier past Column met IntrinsicSize.Min zich aan de inhoud aan, en weight wordt toegepast voor het verdelen van ruimte tussen secties.

@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)
            )
            // Naam
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Actieknoppen
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Bericht") }
                OutlinedButton(onClick = { }) { Text("Volgen") }
            }
        }
    }
}

In het voorbeeld gebruikt Column Arrangement.spacedBy(8.dp) voor gelijkmatige tussenruimtes tussen elementen. horizontalAlignment = CenterHorizontally centreert de avatar, naam en bio. Row binnen Column — een geneste container voor knoppen in één rij. Zo'n combinatie van Column (verticale plaatsing) en Row (horizontale plaatsing) is een typisch patroon voor UI-constructie in Compose.