Box în Jetpack Compose: ce este, proprietățile composable și cum funcționează

Ce este Box în Jetpack Compose

Box — este o funcție composable care plasează elementele copil într-o singură zonă, suprapunându-le unul peste altul. Primul element copil este desenat în partea de jos, ultimul — deasupra. În mod implicit, Box se adaptează la dimensiunea celui mai mare element copil.

Spre deosebire de Row și Column, Box nu aranjează elementele secvențial — toate elementele copil ocupă aceeași zonă și se pot suprapune. Acest lucru face Box indispensabil pentru compunerea straturilor de interfață.

Dimensiunea Box este determinată după regula: dacă niciun element copil nu are dimensiune fixă, Box se reduce la dimensiunea minimă. Dacă cel puțin un element copil are Modifier.fillMaxSize, Box se extinde la maximum.

Potrivit Android Developers Blog, 2024, Box este cel mai eficient container în Compose pentru cazurile în care elementele nu necesită aranjare secvențială. Box nu efectuează măsurători suplimentare pentru poziționare, spre deosebire de Row și Column.

Semnătura de bază a Box

Box acceptă parametrii modifier, contentAlignment și propagateMinConstraints. Toate elementele copil sunt transmise în blocul content, unde fiecare poate avea proprii modificatori.

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

ContentAlignment și Modifier.align în Box

contentAlignment — este un parametru al Box care stabilește alinierea implicită pentru toate elementele copil. Dacă nu este specificat, se utilizează Alignment.TopStart — elementele sunt plasate în colțul din stânga sus al containerului.

Modifier.align permite modificarea alinierii pentru un anumit element copil, independent de contentAlignment. De exemplu, Box cu Alignment.Center poate conține un element cu Modifier.align(Alignment.BottomEnd), care va fi lipit de colțul din dreapta jos.

Potrivit Material Design Guidelines, 2025, Modifier.align este util pentru poziționarea insignelor și pictogramelor peste imaginile de fundal. Acesta permite stabilirea unei alinieri generale pentru întregul conținut al Box și modificarea acesteia pentru elemente individuale.

Tabelul valorilor Alignment

Exemplu cu Modifier.align

În acest exemplu Box conține o imagine de fundal și o insignă în colțul din dreapta jos. Modifier.align(BottomEnd) poziționează insigna independent de contentAlignment al întregului 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)
        )
    }
}

Gestionarea straturilor cu zIndex

Modifier.zIndex gestionează ordinea de desenare a elementelor în interiorul Box. În mod implicit, elementele sunt desenate în ordinea declarării — primul element în partea de jos, ultimul deasupra. zIndex modifică această ordine.

Un element cu zIndex 2.0f este desenat deasupra unui element cu zIndex 1.0f, indiferent de ordinea lor în cod. Valorile negative ale zIndex plasează elementul mai jos decât celelalte. Potrivit Android Developers, 2024, zIndex afectează doar ordinea de desenare, nu și procesarea evenimentelor tactile.

zIndex este util în special în animații și componente draggable, unde un element trebuie să se ridice temporar deasupra celorlalte. De exemplu, la glisarea unei cărți, zIndex-ul acesteia crește pentru a nu fi acoperită de elementele vecine.

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

Exemple practice de utilizare a Box

Box este utilizat pe scară largă pentru suprapunerea textului pe imagine. Imaginea de fundal este plasată prima, apoi textul cu Modifier.align pentru poziționarea deasupra fundalului.

@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 = "Titlu",
            color = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
                .padding(16.dp)
        )
    }
}

Al doilea exemplu — Box pentru crearea unui indicator de încărcare. Box ocupă întreaga zonă a ecranului, iar CircularProgressIndicator este centrat prin contentAlignment.

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

Constrângeri de dimensiune ale Box

Box în mod implicit se adaptează la dimensiunea conținutului. Dacă elementele copil au dimensiuni diferite, Box adoptă dimensiunea celui mai mare element. În absența elementelor copil, Box se reduce la dimensiunea minimă.

Modifier.clipToBounds limitează desenarea elementelor copil la marginile Box. Fără acest modificator, elementele copil pot ieși în afara Box. Potrivit Material Design Guidelines, 2025, clipToBounds este obligatoriu la utilizarea Modifier.scale sau Modifier.graphicsLayer în interiorul Box.

propagateMinConstraints — este un parametru al Box care transmite constrângerile minime de dimensiune elementelor copil. Dacă este setat la true, elementele copil nu pot fi mai mici decât dimensiunea minimă a Box. Acest comportament este important la crearea containerelor personalizate cu dimensiuni minime fixe.

• Box — container minim dacă nu sunt setate dimensiuni și nu există elemente copil cu fillMaxSize
• Modifier.clipToBounds previne ieșirea conținutului din marginile Box
• propagateMinConstraints transmite constrângerile minime elementelor copil