Box у Jetpack Compose-у: шта је, својства composable и како ради

Шта је Box у Jetpack Compose-у

Box — је composable функција која поставља дечије елементе у једној области, преклапајући их један на други. Први дечији елеменат се црта на дну, последњи — на врху. Подразумевано, Box се прилагођава величини највећег дечијег елемента.

За разлику од Row и Column, Box не поређа елементе секвенцијално — сви дечији елементи заузимају исту област и могу да се преклапају. То чини Box неопходним за композицију слојева интерфејса.

Величина Box-а се одређује по правилу: ако ниједан дечији елеменат нема фиксну величину, Box се скупља на минималну величину. Ако бар један дечији елеменат има Modifier.fillMaxSize, Box се шири на максималну.

Према Android Developers Blog, 2024, Box је најефикаснији контејнер у Compose-у за случајеве када елементи не захтевају секвенцијално поређање. Box не врши додатна мерења за позиционирање, за разлику од Row и Column.

Основни потпис Box-а

Box прихвата параметре modifier, contentAlignment и propagateMinConstraints. Сви дечији елементи се прослеђују у content блоку, где сваки може да има сопствене модификаторе.

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

ContentAlignment и Modifier.align у Box-у

contentAlignment — је параметар Box-а који поставља подразумевано поравнање за све дечије елементе. Ако није наведен, користи се Alignment.TopStart — елементи се постављају у горњи леви угао контејнера.

Modifier.align омогућује преинакање поравнања за одређени дечији елеменат независно од contentAlignment. На пример, Box са Alignment.Center може да садржи елеменат са Modifier.align(Alignment.BottomEnd) који ће бити прибијен уз доњи десни угао.

Према Material Design Guidelines, 2025, Modifier.align је кориснан за позиционирање беџева и иконица изнад позадинских слика. То омогућује постављање општег поравнања за целокупни садржај Box-а и његово преинакање за појединачне елементе.

Табела вредности Alignment

Пример са Modifier.align

У овом примеру Box садржи позадинску слику и беџ у доњем десном углу. Modifier.align(BottomEnd) позиционира беџ независно од contentAlignment целокупног 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)
        )
    }
}

Управљање слојевима помоћу zIndex-а

Modifier.zIndex управља редоследом цртања елемената унутар Box-а. Подразумевано, елементи се цртају редом којим су декларисани — први елеменат на дну, последњи на врху. zIndex мења овај редослед.

Елеменат са zIndex 2.0f се црта изнад елемента са zIndex 1.0f, без обзира на њихов редослед у коду. Негативне вредности zIndex-а постављају елеменат испод осталих. Према Android Developers, 2024, zIndex утиче само на редослед цртања, али не на обраду догађаја додира.

zIndex је посебно користан у анимацијама и draggable компонентама, где елеменат мора привремено да се подигне изнад осталих. На пример, приликом картице, њен zIndex се повећава да не буде прекривена суседним елементима.

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

Практични примери коришћења Box-а

Box се широко користи за преклапање текста на слику. Позадинска слика се поставља прва, затим текст са Modifier.align за позиционирање изнад позадине.

@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 = "Наслов",
            color = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
                .padding(16.dp)
        )
    }
}

Други пример — Box за креирање индикатора учитавања. Box заузима целу површину екрана, а CircularProgressIndicator се центрира помоћу contentAlignment.

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

Ограничења величине Box-а

Box се подразумевано прилагођава величини садржаја. Ако дечији елементи имају различите величине, Box прихвата величину највећег елемента. У одсуству дечијих елемената, Box се скупља на минималну величину.

Modifier.clipToBounds ограничава цртање дечијих елемената границама Box-а. Без овог модификатора, дечији елементи могу да излазе ван Box-а. Према Material Design Guidelines, 2025, clipToBounds је обавезан при коришћењу Modifier.scale или Modifier.graphicsLayer унутар Box-а.

propagateMinConstraints — је параметар Box-а који преноси минимална ограничења величине на дечије елементе. Ако је постављен на true, дечији елементи не могу бити мањи од минималне величине Box-а. Ово понашање је важно при креирању прилагођених контејнера са фиксним минималним величинама.

• Box — минимални контејнер ако нису постављене величине и нема дечијих елемената са fillMaxSize
• Modifier.clipToBounds спречава излазак садржаја ван граница Box-а
• propagateMinConstraints преноси минимална ограничења на дечије елементе