Column: függőleges elrendezés és konténer beállítása Compose-ban

Mi az a Column a Jetpack Compose-ban

Column — egy Composable függvény, amely opcionális paramétereket fogad: modifier, verticalArrangement, horizontalAlignment és content — egy lambdát ColumnScope-pal. A Column-on belül a gyermek Composable függvények deklarálás sorrendjében felülről lefelé helyezkednek el. A Column magassága egyenlő a gyermek elemek magasságának összegével plusz az Arrangement által meghatározott hellyel. Szélessége — a gyermek elem maximális szélessége alapján, figyelembe véve az Alignment-et.

A Column láthatatlan konténer: alapértelmezetten nincs saját háttere vagy szegélye. Ha háttérre van szükség — adjon Modifier.background()-ot magához a Column-hoz. A LazyColumn-tól eltérően a Column az összes gyermek elemet egyszerre jeleníti meg és nem támogatja a virtualizációt. Ez azt jelenti, hogy a Column csak kis adathalmazokhoz alkalmas — 10-15 elemig. Hosszú listákhoz használja a LazyColumn-t.

ColumnScope — a Column content lambdájának receiver-e. További módosítókat biztosít, amelyek csak a Column-on belül működnek: weight(), align(), alignByBaseline(). Ezeknek a módosítóknak nincs értelmük a Column-on kívül, mivel a függőleges elrendezés sajátosságaira támaszkodnak. Például a Modifier.align(Alignment.CenterHorizontally) vízszintesen a Column közepére igazítja a gyermek elemet.

Column paraméterei: Arrangement, Alignment, Modifier

VerticalArrangement meghatározza, hogy a függőleges tér hogyan oszlik el az elemek között. Elérhető értékek: Arrangement.Top (alapértelmezett), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Ha a Column magassága nagyobb, mint az elemek magasságának összege, az Arrangement elosztja a szabad helyet. Ha az elemek a teljes magasságot elfoglalják — az Arrangement nem befolyásol.

HorizontalAlignment beállítja az egyes gyermek elemek vízszintes igazítását. Alignment.Start (alapértelmezett, LTR), CenterHorizontally, End. Az Alignment minden elemre függetlenül hat: ha az egyik elem keskeny, a másik széles — az első igazításra kerül, a második kiléphet a Column határain túl. Az Alignment csak akkor működik, ha a Column fix szélességgel vagy fillMaxWidth-val rendelkezik.

Modifier a Column-hoz: A Column egy Modifier-t fogad, amely magára a konténerre kerül alkalmazásra. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — minden szabványos módosító működik. Jellemző: a Modifier.height(IntrinsicSize.Min) arra kényszeríti a Column-t, hogy a minimális magasságot a gyermek elemek alapján számítsa ki, figyelembe véve az Intrinsic measurement-t.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Felül", modifier = Modifier.background(Color.Cyan))
        Text("Közép", modifier = Modifier.background(Color.Magenta))
        Text("Alul", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column a magasságot a tartalomhoz igazítja
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Rövid szöveg")
        Text("Nagyon hosszú szöveg, amely becsomagolódik az oszlopban")
    }
}

Column weight: hely elosztása az elemek között

Modifier.weight() — egy ColumnScope módosító, amely arányosan osztja el a szabad függőleges helyet a Column elemei között a megadott súlyok szerint. Ha a Column 400dp magasságot foglal el, a gyermek elemek pedig összesen 100dp-t, a fennmaradó 300dp a weight elemek között oszlik meg. A weight(2f) paraméterű elem kétszer annyi helyet kap, mint a weight(1f) paraméterű.

fill — a weight második paramétere: weight(weight: Float, fill: Boolean = true). Ha fill = true (alapértelmezett), az elem a teljes rendelkezésre álló magasságra nyúlik. Ha fill = false — az elem csak a saját intrinsic magasságát foglalja el, a fennmaradó hely üresen marad. Ez akkor hasznos, ha az elemnek az egyik oldalhoz kell simulnia, de a weight csak az üres hely elosztásának arányát határozza meg.

A weight korlátai: a weight csak fix magasságú vagy fillMaxHeight() tulajdonságú Column-ban működik. Ha a Column magasságát a gyermek elemek határozzák meg (wrap content), a súlyoknak nincs értelmük — nincs szabad hely az elosztáshoz. A weight nem kombinálható Modifier.height()-al ugyanazon az elemen — ütköznek, és a weight figyelmen kívül marad.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // A magasság 1/6-át foglalja el (súly 1 az 1+2+3=6 összegből)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // A magasság 2/6-át foglalja el
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // A magasság 3/6-át foglalja el
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: mikor mit használjunk

Column az összes gyermek elemet azonnal megjeleníti. Ha 10-15-nél több elem van, a Column jelentős terhelést okoz a kompozícióra és mérésre. A LazyColumn ezzel szemben csak a látható elemeket rendereli és újrahasznosítja a láthatatlanokat. Hosszú listákhoz, több ezer elemet tartalmazó listákhoz, végtelen listákhoz vagy csevegésekhez — a LazyColumn kötelező.

Mikor jobb a Column: űrlapokat tartalmazó képernyők (3-10 mező), profil kártyák, függőleges ikonoszlopok, menük. A Column támogatja az IntrinsicSize-ot is, ami adaptív magassághoz hasznos. Ezenkívül a Column könnyebben hibakereshető — nincs virtualizáció, minden elem látható a Layout Inspector-ban. Statikus UI-hoz a Column a megfelelő választás.

A LazyColumn nyújtja: item caching, kulcsalapú azonosítás, hozzáadás/eltávolítás animáció (animateItemPlacement), sticky headerek. Ha a lista különböző típusú elemeket tartalmaz (eltérő viewType) — használjon LazyColumn-t sealed class-szal az items-ben. A Column nem támogatja a sticky headereket (azokat scrollable Column segítségével kell emulálni). A LazyColumn támogatja továbbá a LazyVerticalGrid-et GridCells használata esetén.

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

Vizsgáljuk meg a felhasználói profil képernyőt, ahol a Column a fő konténerként szolgál az avatarnak, névnek, bio-nak és műveleti gomboknak. Itt a Column IntrinsicSize.Min-nel a tartalomhoz igazodik, a weight pedig a szekciók közötti hely elosztására szolgál.

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // Avatar
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // Név
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Művelet gombok
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Üzenet") }
                OutlinedButton(onClick = { }) { Text("Követés") }
            }
        }
    }
}

A példában a Column Arrangement.spacedBy(8.dp)-t használ az elemek közötti egyenletes távolságokhoz. horizontalAlignment = CenterHorizontally középre igazítja az avatart, nevet és bio-t. A Row a Column-on belül — beágyazott konténer a gomboknak egy sorban. A Column (függőleges elrendezés) és Row (vízszintes elrendezés) ilyen kombinációja tipikus UI-építési minta Compose-ban.