Box v Jetpack Compose: co to je, vlastnosti composable a jak funguje

Co je Box v Jetpack Compose

Box — je composable funkce, která umísťuje dětské prvky do jedné oblasti a vrství je na sebe. První dětský prvek se kreslí dole, poslední — nahoře. Ve výchozím nastavení se Box přizpůsobuje velikosti největšího dětského prvku.

Na rozdíl od Row a Column Box neřadí prvky sekvenčně — všechny dětské prvky zabírají stejnou oblast a mohou se překrývat. To činí Box nepostradatelným pro kompozici vrstev rozhraní.

Velikost Boxu se řídí pravidlem: pokud žádný dětský prvek nemá pevnou velikost, Box se smrští na minimální velikost. Pokud má alespoň jeden dětský prvek Modifier.fillMaxSize, Box se roztáhne na maximální velikost.

Podle Android Developers Blog, 2024 je Box nejúčinnějším kontejnerem v Compose pro případy, kdy prvky nevyžadují sekvenční uspořádání. Box neprovádí žádná další měření pro pozicování, na rozdíl od Row a Column.

Základní signatura Boxu

Box přijímá parametry modifier, contentAlignment a propagateMinConstraints. Všechny dětské prvky se předávají v bloku content, kde každý může mít vlastní modifikátory.

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

ContentAlignment a Modifier.align v Boxu

contentAlignment — je parametr Boxu, který nastavuje výchozí zarovnání pro všechny dětské prvky. Pokud není uveden, použije se Alignment.TopStart — prvky se umístí do levého horního rohu kontejneru.

Modifier.align umožňuje změnit zarovnání konkrétního dětského prvku nezávisle na contentAlignment. Například Box s Alignment.Center může obsahovat prvek s Modifier.align(Alignment.BottomEnd), který bude přitisknut do pravého dolního rohu.

Podle Material Design Guidelines, 2025 je Modifier.align užitečný pro pozicování odznaků a ikon nad obrázky pozadí. Umožňuje nastavit obecné zarovnání pro celý obsah Boxu a přepsat je pro jednotlivé prvky.

Tabulka hodnot Alignment

Příklad s Modifier.align

V tomto příkladu Box obsahuje obrázek pozadí a odznak v pravém dolním rohu. Modifier.align(BottomEnd) pozicuje odznak nezávisle na contentAlignment celého Boxu.

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

Správa vrstev pomocí zIndex

Modifier.zIndex řídí pořadí kreslení prvků uvnitř Boxu. Ve výchozím nastavení se prvky kreslí v pořadí deklarace — první prvek dole, poslední nahoře. zIndex toto pořadí mění.

Prvek s zIndex 2.0f se kreslí nad prvkem s zIndex 1.0f, bez ohledu na jejich pořadí v kódu. Záporné hodnoty zIndex umísťují prvek pod ostatní. Podle Android Developers, 2024 zIndex ovlivňuje pouze pořadí kreslení, nikoli zpracování událostí dotyku.

zIndex je obzvláště užitečný v animacích a draggable komponentech, kde se prvek musí dočasně zvednout nad ostatní. Například při přetažení karty se její zIndex zvýší, aby nebyla zakryta sousedními prvky.

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

Praktické příklady použití Boxu

Box se široce používá pro vrstvení textu na obrázek. Obrázek pozadí se umístí první, poté text s Modifier.align pro pozicování nad pozadím.

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

Druhý příklad — Box pro vytvoření indikátoru načítání. Box zabírá celou oblast obrazovky a CircularProgressIndicator se centruje pomocí contentAlignment.

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

Omezení velikosti Boxu

Box se ve výchozím nastavení přizpůssobuje velikosti obsahu. Pokud mají dětské prvky různé velikosti, Box přijme velikost největšího prvku. Při absenci dětských prvků se Box smrští na minimální velikost.

Modifier.clipToBounds omezuje kreslení dětských prvků na hranice Boxu. Bez tohoto modifikátoru mohou dětské prvky přesahovat mimo Box. Podle Material Design Guidelines, 2025 je clipToBounds povinný při použití Modifier.scale nebo Modifier.graphicsLayer uvnitř Boxu.

propagateMinConstraints — je parametr Boxu, který předává minimální omezení velikosti dětským prvkům. Pokud je nastaven na true, dětské prvky nemohou být menší než minimální velikost Boxu. Toto chování je důležité při vytváření vlastních kontejnerů s pevnými minimálními rozměry.

• Box — minimální kontejner, pokud nejsou nastaveny rozměry a neexistují dětské prvky s fillMaxSize
• Modifier.clipToBounds brání úniku obsahu mimo hranice Boxu
• propagateMinConstraints předává minimální omezení dětským prvkům