Box in Jetpack Compose: wat het is, composable-eigenschappen en hoe het werkt

Wat is Box in Jetpack Compose

Box — is een composable-functie die onderliggende elementen in één gebied plaatst en ze bovenop elkaar stapelt. Het eerste onderliggende element wordt onderaan getekend, het laatste — bovenaan. Standaard past Box zich aan de grootte van het grootste onderliggende element aan.

In tegenstelling tot Row en Column rangschikt Box elementen niet sequentieel — alle onderliggende elementen bezetten hetzelfde gebied en kunnen elkaar overlappen. Dit maakt Box onmisbaar voor het samenstellen van interfacelagen.

De grootte van Box wordt bepaald door de regel: als geen enkel onderliggend element een vaste grootte heeft, krimpt Box tot de minimale grootte. Als ten minste één onderliggend element Modifier.fillMaxSize heeft, breidt Box zich uit tot de maximale grootte.

Volgens Android Developers Blog, 2024 is Box de meest efficiënte container in Compose voor gevallen waarin elementen geen sequentiële rangschikking vereisen. Box voert geen extra metingen uit voor positionering, in tegenstelling tot Row en Column.

Basis signatuur van Box

Box accepteert de parameters modifier, contentAlignment en propagateMinConstraints. Alle onderliggende elementen worden doorgegeven in het content-blok, waar elk zijn eigen modifiers kan hebben.

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier.size(200.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.fillMaxSize().background(Color.Blue)
        )
        Text(
            text = "Hallo",
            color = Color.White
        )
    }
}

ContentAlignment en Modifier.align in Box

contentAlignment — is een parameter van Box die de standaarduitlijning voor alle onderliggende elementen bepaalt. Indien niet opgegeven, wordt Alignment.TopStart gebruikt — elementen worden in de linkerbovenhoek van de container geplaatst.

Modifier.align maakt het mogelijk de uitlijning voor een specifiek onderliggend element te wijzigen, onafhankelijk van contentAlignment. Bijvoorbeeld, Box met Alignment.Center kan een element bevatten met Modifier.align(Alignment.BottomEnd) dat naar de rechteronderhoek wordt gedrukt.

Volgens Material Design Guidelines, 2025 is Modifier.align nuttig voor het positioneren van badges en pictogrammen boven achtergrondafbeeldingen. Het maakt het mogelijk een algemene uitlijning voor de volledige inhoud van Box in te stellen en deze voor individuele elementen te overschrijven.

Tabel met Alignment-waarden

Voorbeeld met Modifier.align

In dit voorbeeld bevat Box een achtergrondafbeelding en een badge in de rechteronderhoek. Modifier.align(BottomEnd) plaatst de badge onafhankelijk van de contentAlignment van de hele Box.

@Composable
fun BadgeExample() {
    Box(
        modifier = Modifier.size(120.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.size(100.dp).background(Color.Gray)
        )
        Box(
            modifier = Modifier
                .size(30.dp)
                .align(Alignment.BottomEnd)
                .background(Color.Red, CircleShape)
        )
    }
}

Lagen beheren met zIndex

Modifier.zIndex beheert de tekenvolgorde van elementen binnen Box. Standaard worden elementen getekend in de volgorde van declaratie — het eerste element onderaan, het laatste bovenaan. zIndex wijzigt deze volgorde.

Een element met zIndex 2.0f wordt getekend boven een element met zIndex 1.0f, ongeacht hun volgorde in de code. Negatieve zIndex-waarden plaatsen het element lager dan de rest. Volgens Android Developers, 2024 beïnvloedt zIndex alleen de tekenvolgorde, niet de verwerking van aanraakgebeurtenissen.

zIndex is vooral nuttig in animaties en draggable componenten, waar een element tijdelijk boven de andere moet worden geheven. Bijvoorbeeld, tijdens het slepen van een kaart wordt de zIndex verhoogd om te voorkomen dat deze wordt bedekt door aangrenzende elementen.

@Composable
fun ZIndexExample() {
    Box(modifier = Modifier.size(150.dp)) {
        Box(modifier = Modifier.size(80.dp)
            .align(Alignment.TopStart)
            .zIndex(2.0f)
            .background(Color.Green))
        Box(modifier = Modifier.size(100.dp)
            .align(Alignment.Center)
            .zIndex(1.0f)
            .background(Color.Blue))
    }
}

Praktische voorbeelden van Box-gebruik

Box wordt veel gebruikt voor het plaatsen van tekst over een afbeelding. De achtergrondafbeelding wordt eerst geplaatst, daarna tekst met Modifier.align voor positionering boven de achtergrond.

@Composable
fun ImageWithOverlay() {
    Box(modifier = Modifier.fillMaxWidth().height(200.dp)) {
        Image(
            painter = painterResource(R.drawable.photo),
            contentDescription = "Photo",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        Box(
            modifier = Modifier.fillMaxSize()
                .background(Color.Black.copy(alpha = 0.4f))
        )
        Text(
            text = "Titel",
            color = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
                .padding(16.dp)
        )
    }
}

Het tweede voorbeeld — Box voor het maken van een laadindicator. Box beslaat het hele schermgebied en CircularProgressIndicator wordt gecentreerd via contentAlignment.

@Composable
fun LoadingOverlay() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator(
            modifier = Modifier.size(48.dp)
        )
    }
}

Afmetingsbeperkingen van Box

Box past zich standaard aan de grootte van de inhoud aan. Als onderliggende elementen verschillende groottes hebben, neemt Box de grootte van het grootste element aan. Bij afwezigheid van onderliggende elementen krimpt Box tot de minimale grootte.

Modifier.clipToBounds beperkt het tekenen van onderliggende elementen tot de grenzen van Box. Zonder deze modifier kunnen onderliggende elementen buiten Box vallen. Volgens Material Design Guidelines, 2025 is clipToBounds verplicht bij gebruik van Modifier.scale of Modifier.graphicsLayer binnen Box.

propagateMinConstraints — is een parameter van Box die minimale afmetingsbeperkingen doorgeeft aan onderliggende elementen. Indien ingesteld op true, kunnen onderliggende elementen niet kleiner zijn dan de minimale grootte van Box. Dit gedrag is belangrijk bij het maken van aangepaste containers met vaste minimale afmetingen.

• Box — minimale container als er geen afmetingen zijn ingesteld en er geen onderliggende elementen met fillMaxSize zijn
• Modifier.clipToBounds voorkomt dat inhoud buiten de Box-grenzen komt
• propagateMinConstraints geeft minimale beperkingen door aan onderliggende elementen