Box a Jetpack Compose-ban: mi ez, a composable tulajdonságai és hogyan működik

Mi az a Box a Jetpack Compose-ban

Box — egy composable függvény, amely a gyermekelemeket egy területre helyezi, egymásra rétegezve őket. Az első gyermekelem alul, az utolsó — felül rajzolódik. Alapértelmezésben a Box a legnagyobb gyermekelem méretéhez igazodik.

Ellentétben a Row-val és Column-nal, a Box nem sorrendben rendezi az elemeket — az összes gyermekelem ugyanazt a területet foglalja el, és átfedhetik egymást. Ez teszi a Box-t nélkülözhetetlenné a felületi rétegek összeállításához.

A Box méretét a szabály határozza meg: ha egyetlen gyermekelem sem rendelkezik rögzített mérettel, a Box minimális méretre összehúzódik. Ha legalább egy gyermekelem rendelkezik Modifier.fillMaxSize-szel, a Box maximális méretre tágul.

A Android Developers Blog, 2024 szerint a Box a leghatékonyabb konténer a Compose-ban olyan esetekben, amikor az elemek nem igényelnek sorrendi elrendezést. A Box nem végez további méréseket a pozícionáláshoz, ellentétben a Row-val és Column-nal.

A Box alap szignatúrája

Box elfogadja a modifier, contentAlignment és propagateMinConstraints paramétereket. Az összes gyermekelem a content blokkban kerül átadásra, ahol mindegyik rendelkezhet saját módosítókkal.

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

ContentAlignment és Modifier.align a Box-ban

contentAlignment — a Box egy paramétere, amely az alapértelmezett igazítást állítja be az összes gyermekelem számára. Ha nincs megadva, akkor Alignment.TopStart használatos — az elemek a konténer bal felső sarkába kerülnek.

Modifier.align lehetővé teszi egy adott gyermekelem igazításának módosítását a contentAlignment-tól függetlenül. Például egy Alignment.Center-rel rendelkező Box tartalmazhat egy Modifier.align(Alignment.BottomEnd) elemeket, ami a jobb alsó sarokhoz lesz rágzítva.

A Material Design Guidelines, 2025 szerint a Modifier.align hasznos a jelvények és ikonok háttérképek fölé helyezéséhez. Lehetővé teszi általános igazítás beállítását a Box teljes tartalmához, és annak felülírását egyes elemek esetében.

Az Alignment értékek táblázata

Példa Modifier.align használattal

Ebben a példában a Box tartalmaz egy háttérképet és egy jelvényt a jobb alsó sarokban. A Modifier.align(BottomEnd) a jelvényt a Box teljes contentAlignment-jétől függetlenül pozícionálja.

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

Rétegek kezelése zIndex-szel

Modifier.zIndex kezeli az elemek rajzolási sorrendjét a Box-on belül. Alapértelmezésben az elemek deklarációs sorrendben rajzolódnak — az első elem alul, az utolsó felül. A zIndex megváltoztatja ezt a sorrendet.

Egy 2.0f zIndex értékkel rendelkező elem egy 1.0f zIndex értékű elem fölé rajzolódik, függetlenül a kódbeli sorrendjüktől. A negatív zIndex értékek az elemet a többi alá helyezik. A Android Developers, 2024 szerint a zIndex csak a rajzolási sorrendet befolyásolja, nem az érintési események feldolgozását.

zIndex különösen hasznos animációkban és draggable komponensekben, ahol egy elemnek ideiglenesen a többi fölé kell emelkednie. Például egy kártya húzásakor a zIndex megnő, hogy ne takarják a szomszédos elemek.

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

Gyakorlati példák a Box használatára

Box széles körben használatos szöveg képre helyezéséhez. A háttérkép kerül előre, majd a szöveg Modifier.align segítségével a háttér fölé pozícionálva.

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

Második példa — Box betöltési indikátor létrehozásához. A Box a teljes képernyőterületet elfoglalja, a CircularProgressIndicator pedig a contentAlignment segítségével középre kerül.

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

A Box méretkorlátozásai

Box alapértelmezésben a tartalom méretéhez igazodik. Ha a gyermekelemek különböző méretűek, a Box a legnagyobb elem méretét veszi fel. Gyermekelemek hiányában a Box minimális méretre összehúzódik.

Modifier.clipToBounds a gyermekelemek rajzolását a Box határaihoz korlátozza. E módosító nélkül a gyermekelemek kijuthatnak a Box-ból. A Material Design Guidelines, 2025 szerint a clipToBounds kötelező a Modifier.scale vagy Modifier.graphicsLayer használatakor a Box-on belül.

propagateMinConstraints — a Box paramétere, amely továbbítja a minimális méretkorlátokat a gyermekelemeknek. Ha true értékre van állítva, a gyermekelemek nem lehetnek kisebbek a Box minimális méreténél. Ez a viselkedés fontos rögzített minimális méretű egyedi konténerek létrehozásakor.

• Box — minimális konténer, ha nincsenek méretek beállítva és nincsenek fillMaxSize gyermekelemek
• Modifier.clipToBounds megakadályozza a tartalom kijutását a Box határain túl
• propagateMinConstraints továbbítja a minimális korlátokat a gyermekelemeknek