Column: вертикално распоређивање и подешавање контејнера у Compose-у

Шта је Column у Jetpack Compose-у

Column — је Composable функција која прихвата опционе параметре: modifier, verticalArrangement, horizontalAlignment и content — ламбду са ColumnScope. Унутар Column-а, подређене Composable функције се распоређују одозго наниже редом декларације. Висина Column-а једнака је збиру висина подређених елемената плус простор одређен Arrangement-ом. Ширина — по максималној ширини подређеног елемента узимајући у обзир Alignment.

Column је невидљиви контејнер: нема своју позадину или ивицу подразумевано. Ако је потребна позадина — додајте Modifier.background() самом Column-у. За разлику од LazyColumn-а, Column приказује све подређене елементе истовремено и не подржава виртуелизацију. То значи да је Column погодан само за мале скупове података — до 10-15 елемената. За дуге листе користите LazyColumn.

ColumnScope — је receiver за content ламбду Column-а. Он пружа додатне модификаторе који раде само унутар Column-а: weight(), align(), alignByBaseline(). Ови модификатори немају смисла ван Column-а, јер се ослањају на специфику вертикалног распоређивања. На пример, Modifier.align(Alignment.CenterHorizontally) поравнава подређени елемент по центру Column-а хоризонтално.

Параметри Column-а: Arrangement, Alignment, Modifier

VerticalArrangement одређује како се распоређује вертикални простор између елемената. Доступне вредности: Arrangement.Top (подразумевано), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Ако је висина Column-а већа од збира висина елемената, Arrangement распоређује слободан простор. Ако елементи заузимају целу висину — Arrangement нема утицаја.

HorizontalAlignment задаје хоризонтално поравнање сваког подређеног елемента. Alignment.Start (подразумевано, LTR), CenterHorizontally, End. Alignment делује на сваки елемент независно: ако је један елемент узак, а други широк — први ће бити поравнат, други може изаћи из граница Column-а. Alignment ради само ако Column има фиксну ширину или fillMaxWidth.

Modifier за Column: Column прихвата Modifier који се примењује на сам контејнер. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — сви стандардни модификатори раде. Посебност: Modifier.height(IntrinsicSize.Min) приморава Column да израчуна минималну висину на основу подређених елемената узимајући у обзир Intrinsic measurement.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Врх", modifier = Modifier.background(Color.Cyan))
        Text("Средина", modifier = Modifier.background(Color.Magenta))
        Text("Дно", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column прилагођава висину садржају
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Кратак текст")
        Text("Веома дугачак текст који ће се омотати у колони")
    }
}

Column weight: расподела простора између елемената

Modifier.weight() — је модификатор ColumnScope-а који распоређује слободан вертикални простор између елемената Column-а пропорционално наведеним тежинама. Ако Column заузима 400dp висине, а подређени елементи укупно — 100dp, онда се преосталих 300dp дели између weight елемената. Елемент са weight(2f) добиће дупло више простора од елемента са weight(1f).

fill — други параметар weight: weight(weight: Float, fill: Boolean = true). Ако је fill = true (подразумевано), елемент се развлачи на целу доступну висину. Ако је fill = false — елемент заузима само своју интринзичну висину, а преостали простор остаје празан. Ово је корисно када елемент треба да буде притиснут уз једну страну, али weight задаје само пропорцију расподеле празног простора.

Ограничења weight-а: weight ради само у Column-у са фиксном висином или fillMaxHeight(). Ако је висина Column-а одређена подређеним елементима (wrap content), тежине немају смисла — нема слободног простора за расподелу. Такође, weight се не може комбиновати са Modifier.height() на истом елементу — они су у конфликту, и weight се игнорише.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Заузима 1/6 висине (тежина 1 од збира 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Заузима 2/6 висине
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Заузима 3/6 висине
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: када шта користити

Column приказује све подређене елементе одмах. Ако има више од 10-15 елемената, Column ствара значајно оптерећење на композицију и мерење. LazyColumn, насупрот томе, рендерује само видљиве елементе и поново користи невидљиве. За дуге листе, листе са хиљадама елемената, бесконачне листе или четове — LazyColumn је обавезан.

Када је Column бољи: екрани са формама (3-10 поља), картице профила, вертикалне колоне са иконицама, мени. Column такође подржава IntrinsicSize, што је корисно за адаптивну висину. Поред тога, Column је једноставнији за отклањање грешака — нема виртуелизације, сви елементи су видљиви у Layout Inspector-у. За статички UI, Column је прави избор.

LazyColumn пружа: item caching, key-based identity, анимацију додавања/уклањања (animateItemPlacement), sticky headers. Ако листа садржи елементе различитих типова (различити viewType) — користите LazyColumn са sealed class у items. Column не подржава sticky headers (треба их емулирати кроз scrollable Column). LazyColumn такође подржава LazyVerticalGrid када се користи GridCells.

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

Размотримо екран профила корисника, где се Column користи као главни контејнер за аватар, име, био и дугмад за акције. Овде Column са IntrinsicSize.Min прилагођава се садржају, а weight се примењује за расподелу простора између секција.

@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)
        ) {
            // Аватар
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // Име
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Био
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Дугмад за акције
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Порука") }
                OutlinedButton(onClick = { }) { Text("Прати") }
            }
        }
    }
}

У примеру Column користи Arrangement.spacedBy(8.dp) за равномерне размаке између елемената. horizontalAlignment = CenterHorizontally центрира аватар, име и био. Row унутар Column-а — угнежђени контејнер за дугмад у једном реду. Таква комбинација Column-а (вертикални распоред) и Row-а (хоризонтални) је типичан образац изградње UI-ја у Compose-у.