Box umožňuje prekrývať prvky cez seba (ako position: relative v CSS). Prvky sa kladú na seba:

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application

@Composable
fun BoxExample() {
    MaterialTheme {
        Surface {
            Box(
                modifier = Modifier.size(200.dp).background(Color.LightGray),
                contentAlignment = Alignment.Center
            ) {
                // Pozadie
                Box(modifier = Modifier.size(150.dp).background(Color.Cyan))
                // Predny prvok
                Box(modifier = Modifier.size(100.dp).background(Color.Red))
                // Text navrchu
                Text("Navrchu", color = Color.White)
            }
        }
    }
}

fun main() = application {
    Window(onCloseRequest = ::exitApplication, title = "Box") {
        BoxExample()
    }
}

21.3.1 Kedy použiť Box?

• Prekrytie prvkov (napríklad badge na ikone)
• Pozadie za textom
• Overlay modálneho okna

21.3.2 contentAlignment

contentAlignment určuje, ako sú vnorené prvky zarovnané v Box-e:

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center  // centrovanie vsetkych prvku
) {
    Text("Centrovany text")
}

Box nie je určený na klasické rozloženie - na to slúži Column a Row.

Úlohy

Úloha 1

Vytvor Box s farebným pozadím a textom vycentrovaným v jeho strede.

Úloha 2

Pridaj do pravého horného rohu ikony malý textový badge s číslom 3.

Úloha 3

Vytvor prekrytie s polopriehľadným pozadím a tlačidlom umiestneným navrchu.