Box i Jetpack Compose: vad det är, composable-egenskaper och hur det fungerar

Vad är Box i Jetpack Compose

Box — är en composable-funktion som placerar underordnade element i ett område och lägger dem ovanpå varandra. Det första underordnade elementet ritas längst ner, det sista — längst upp. Som standard anpassar Box sig till storleken av det största underordnade elementet.

Till skillnad från Row och Column ordnar Box inte element sekventiellt — alla underordnade element upptar samma område och kan överlappa varandra. Detta gör Box oumbärlig för komposition av gränssnittslager.

Storleken på Box bestäms av regeln: om inget underordnat element har en fast storlek, krymper Box till minsta storlek. Om minst ett underordnat element har Modifier.fillMaxSize, expanderar Box till maximal storlek.

Enligt Android Developers Blog, 2024 är Box den mest effektiva behållaren i Compose för fall där element inte kräver sekventiell ordning. Box utför inga extra mätningar för positionering, till skillnad från Row och Column.

Boxens grundläggande signatur

Box accepterar parametrarna modifier, contentAlignment och propagateMinConstraints. Alla underordnade element skickas i content-blocket, där varje kan ha egna modifierare.

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

ContentAlignment och Modifier.align i Box

contentAlignment — är en parameter av Box som anger standardjusteringen för alla underordnade element. Om inte angivet används Alignment.TopStart — element placeras i behållarens övre vänstra hörn.

Modifier.align gör det möjligt att ändra justeringen för ett specifikt underordnat element oberoende av contentAlignment. Till exempel kan en Box med Alignment.Center innehålla ett element med Modifier.align(Alignment.BottomEnd) som trycks mot nedre högra hörnet.

Enligt Material Design Guidelines, 2025 är Modifier.align användbar för att placera märken och ikoner ovanpå bakgrundsbilder. Den gör det möjligt att ställa in en allmän justering för Boxens hela innehåll och åsidosätta den för enskilda element.

Tabell över Alignment-värden

Exempel med Modifier.align

I detta exempel innehåller Box en bakgrundsbild och ett märke i nedre högra hörnet. Modifier.align(BottomEnd) positionerar märket oberoende av hela Boxens contentAlignment.

@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)
        )
    }
}

Hantera lager med zIndex

Modifier.zIndex hanterar ritordningen för element inuti Box. Som standard ritas element i deklarationsordning — första elementet längst ner, sista längst upp. zIndex ändrar denna ordning.

Ett element med zIndex 2.0f ritas ovanför ett element med zIndex 1.0f, oavsett deras ordning i koden. Negativa zIndex-värden placerar elementet längre ner än de andra. Enligt Android Developers, 2024 påverkar zIndex endast ritordningen, inte bearbetningen av beröringshändelser.

zIndex är särskilt användbart i animationer och draggable-komponenter, där ett element tillfälligt måste lyftas ovanför de andra. Till exempel, när man drar ett kort ökas dess zIndex så att det inte täcks av angränsande element.

@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))
    }
}

Praktiska exempel på Box-användning

Box används flitigt för att lägga text över en bild. Bakgrundsbilden placeras först, sedan text med Modifier.align för positionering ovanför bakgrunden.

@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)
        )
    }
}

Andra exemplet — Box för att skapa en laddningsindikator. Box upptar hela skärmområdet och CircularProgressIndicator centreras via contentAlignment.

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

Boxens storleksbegränsningar

Box anpassar sig som standard till innehållets storlek. Om underordnade element har olika storlekar, tar Box den största elementets storlek. I avsaknad av underordnade element krymper Box till minsta storlek.

Modifier.clipToBounds begränsar ritningen av underordnade element till Boxens gränser. Utan denna modifierare kan underordnade element lämna Box. Enligt Material Design Guidelines, 2025 är clipToBounds obligatorisk vid användning av Modifier.scale eller Modifier.graphicsLayer inuti Box.

propagateMinConstraints — är en parameter av Box som överför minimistorleksbegränsningar till underordnade element. Om inställd på true kan underordnade element inte vara mindre än Boxens minimistorlek. Detta beteende är viktigt när man skapar anpassade behållare med fasta minimimått.

• Box — minimi-behållare om inga storlekar anges och det inte finns några underordnade element med fillMaxSize
• Modifier.clipToBounds förhindrar att innehåll lämnar Boxens gränser
• propagateMinConstraints överför minimibegränsningar till underordnade element