Column: patayong pag-aayos at pagsasaayos ng container sa Compose

Ano ang Column sa Jetpack Compose

Column — ay isang Composable function na tumatanggap ng opsyonal na parameter: modifier, verticalArrangement, horizontalAlignment at content — lambda na may ColumnScope. Sa loob ng Column, ang mga child Composable function ay inaayos mula itaas pababa sa pagkakasunod-sunod ng deklarasyon. Ang taas ng Column ay katumbas ng kabuuan ng taas ng mga child element at ang espasyo na tinukoy ng Arrangement. Lapad — batay sa maximum na lapad ng child element na isinasaalang-alang ang Alignment.

Ang Column ay isang hindi nakikitang container: wala itong sariling background o hangganan bilang default. Kung kailangan ng background — magdagdag ng Modifier.background() sa Column mismo. Hindi tulad ng LazyColumn, ipinapakita ng Column ang lahat ng child element nang sabay-sabay at hindi sumusuporta sa virtualization. Nangangahulugan ito na ang Column ay angkop lamang para sa maliliit na dataset — hanggang 10-15 elemento. Para sa mahabang listahan gamitin ang LazyColumn.

ColumnScope — ay isang receiver para sa content lambda ng Column. Nagbibigay ito ng mga karagdagang modifier na gumagana lamang sa loob ng Column: weight(), align(), alignByBaseline(). Ang mga modifier na ito ay walang kahulugan sa labas ng Column dahil umaasa sila sa espesipiko ng patayong pag-aayos. Halimbawa, ang Modifier.align(Alignment.CenterHorizontally) ay nag-aayos ng child element sa gitna ng Column nang pahalang.

Mga Parameter ng Column: Arrangement, Alignment, Modifier

VerticalArrangement tumutukoy kung paano ipinamamahagi ang patayong espasyo sa pagitan ng mga elemento. Mga available na halaga: Arrangement.Top (default), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Kung ang taas ng Column ay mas malaki kaysa sa kabuuan ng taas ng mga elemento, ipinamahagi ng Arrangement ang libreng espasyo. Kung ang mga elemento ay sumasakop sa buong taas — walang epekto ang Arrangement.

HorizontalAlignment nagtatakda ng pahalang na pagkakahanay ng bawat child element. Alignment.Start (default, LTR), CenterHorizontally, End. Ang Alignment ay kumikilos sa bawat elemento nang independyente: kung ang isang elemento ay makitid at ang isa ay malapad — ang una ay maihahanay, ang pangalawa ay maaaring lumampas sa hangganan ng Column. Ang Alignment ay gumagana lamang kung ang Column ay may nakapirming lapad o fillMaxWidth.

Modifier para sa Column: Ang Column ay tumatanggap ng Modifier na inilalapat sa container mismo. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — lahat ng standard na modifier ay gumagana. Katangian: Ang Modifier.height(IntrinsicSize.Min) ay pumipilit sa Column na kalkulahin ang minimal na taas batay sa mga child element na isinasaalang-alang ang Intrinsic measurement.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Itaas", modifier = Modifier.background(Color.Cyan))
        Text("Gitna", modifier = Modifier.background(Color.Magenta))
        Text("Ibaba", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column inaayos ang taas sa nilalaman
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Maikling teksto")
        Text("Isang napakahabang teksto na babalot sa loob ng column")
    }
}

Column weight: distribusyon ng espasyo sa pagitan ng mga elemento

Modifier.weight() — ay isang ColumnScope modifier na namamahagi ng libreng patayong espasyo sa pagitan ng mga elemento ng Column nang proporsyonal sa tinukoy na timbang. Kung ang Column ay sumasakop ng 400dp na taas, at ang mga child element ay kabuuang 100dp, ang natitirang 300dp ay hinati sa pagitan ng weight element. Ang elementong may weight(2f) ay makakatanggap ng dobleng espasyo kaysa sa elementong may weight(1f).

fill — pangalawang parameter ng weight: weight(weight: Float, fill: Boolean = true). Kung fill = true (default), ang elemento ay lumalawak sa buong magagamit na taas. Kung fill = false — ang elemento ay sumasakop lamang ng intrinsic na taas nito, ang natitirang espasyo ay mananatiling walang laman. Ito ay kapaki-pakinabang kapag ang elemento ay dapat na nakadikit sa isang gilid, ngunit ang weight ay tumutukoy lamang sa proporsyon ng distribusyon ng walang laman na espasyo.

Mga limitasyon ng weight: ang weight ay gumagana lamang sa Column na may nakapirming taas o fillMaxHeight(). Kung ang taas ng Column ay tinutukoy ng mga child element (wrap content), ang mga timbang ay walang kahulugan — walang libreng espasyo para ipamahagi. Hindi rin maaaring pagsamahin ang weight sa Modifier.height() sa parehong elemento — sila ay nagkakasalungatan, at ang weight ay hindi pinapansin.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Kumukuha ng 1/6 ng taas (timbang 1 ng kabuuan 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Kumukuha ng 2/6 ng taas
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Kumukuha ng 3/6 ng taas
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: kailan gagamitin ang ano

Column ay nagpapakita ng lahat ng child element kaagad. Kung ang mga elemento ay higit sa 10-15, ang Column ay lumilikha ng malaking pagkarga sa komposisyon at pagsukat. Ang LazyColumn, sa kabaligtaran, ay nagre-render lamang ng nakikitang elemento at muling ginagamit ang hindi nakikita. Para sa mahabang listahan, listahan na may libu-libong elemento, walang katapusang listahan o chat — ang LazyColumn ay sapilitan.

Kailan mas mahusay ang Column: mga screen na may form (3-10 field), profile card, patayong column na may icon, menu. Ang Column ay sumusuporta rin sa IntrinsicSize, na kapaki-pakinabang para sa adaptibong taas. Bukod pa rito, ang Column ay mas madaling i-debug — walang virtualization, lahat ng elemento ay nakikita sa Layout Inspector. Para sa static na UI, ang Column ay tamang pagpili.

Ang LazyColumn ay nagbibigay: item caching, key-based identity, animation ng pagdaragdag/pagtanggal (animateItemPlacement), sticky headers. Kung ang listahan ay naglalaman ng mga elemento ng iba't ibang uri (iba't ibang viewType) — gamitin ang LazyColumn na may sealed class sa items. Hindi sinusuportahan ng Column ang sticky headers (kailangan silang i-emulate sa pamamagitan ng scrollable Column). Sinusuportahan din ng LazyColumn ang LazyVerticalGrid kapag gumagamit ng GridCells.

Mga praktikal na halimbawa ng paggamit ng Column

Isaalang-alang natin ang screen ng profile ng gumagamit, kung saan ang Column ay ginagamit bilang pangunahing container para sa avatar, pangalan, bio at mga button ng aksyon. Dito ang Column na may IntrinsicSize.Min ay umaayon sa nilalaman, at ang weight ay inilalapat para sa pamamahagi ng espasyo sa pagitan ng mga seksyon.

@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)
            )
            // Pangalan
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Mga button ng aksyon
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Mensahe") }
                OutlinedButton(onClick = { }) { Text("Sundan") }
            }
        }
    }
}

Sa halimbawa, ang Column ay gumagamit ng Arrangement.spacedBy(8.dp) para sa pantay na pagitan sa pagitan ng mga elemento. horizontalAlignment = CenterHorizontally isinasentro ang avatar, pangalan at bio. Ang Row sa loob ng Column — nested container para sa mga button sa isang hilera. Ang kombinasyong ito ng Column (patayong pag-aayos) at Row (pahalang na pag-aayos) ay isang tipikal na pattern ng pagbuo ng UI sa Compose.