Row sa Jetpack Compose: ano ito, mga katangian ng composable at kung paano ito gumagana

Ano ang Row sa Jetpack Compose

Row — ay isang composable function na naglalagay ng mga child element sa isang pahalang na pagkakasunod-sunod. Sa hierarchy ng mga layout ng Compose, ang Row ay sumasakop sa posisyon ng pangunahing lalagyan kasama ang Column at Box.

Ang Row ay hindi nangangailangan ng pagtukoy ng mga sukat — awtomatiko itong umaangkop sa nilalaman. Ang lapad ng Row ay katumbas ng kabuuan ng mga lapad ng mga child element kasama ang mga puwang, maliban kung nakatakda ang Modifier.fillMaxWidth o isang nakapirming sukat.

Ang mga child element ng Row ay maaaring magkaroon ng sariling mga modifier na nakakaapekto sa kanilang posisyon sa loob ng lalagyan. Halimbawa, ang Modifier.weight ay nagpapahintulot sa mga elemento na kumuha ng proporsyonal na bahagi ng magagamit na espasyo.

Ayon sa Android Developers Blog, 2024, pinoproseso ng Row ang mga child element nang sunud-sunod, kinakalkula ang kanilang mga sukat batay sa mga panuntunan sa pagsukat ng Compose: una ang mga elementong walang weight ay sinusukat, pagkatapos ang natitirang espasyo ay ipinamamahagi sa mga elementong may weight.

Sintaks at pangunahing lagda ng Row

Ang pangunahing lagda ng Row ay kinabibilangan ng parameter na modifier, horizontalArrangement at verticalAlignment. Lahat ng child element ay ipinapasa sa huling lambda block na content.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Isa")
        Text(text = "Dalawa")
        Text(text = "Tatlo")
    }
}

Mga Katangian ng Row: horizontalArrangement at verticalAlignment

Ang parameter na horizontalArrangement ay tumutukoy kung paano ipinamamahagi ang mga child element sa kahabaan ng pahalang na axis sa loob ng Row. Ang mga halagang Start, End, Center, SpaceBetween, SpaceAround at SpaceEvenly mula sa klase ng Arrangement ay magagamit.

Arrangement.Start ay naglalagay ng mga elemento sa simula ng lalagyan, Arrangement.End — sa dulo, at Arrangement.Center — sa gitna. Ang mga halagang ito ay gumagana katulad ng property na justify-content sa CSS Flexbox.

Arrangement.SpaceBetween ay namamahagi ng mga elemento nang pantay-pantay, inilalagay ang unang elemento sa simula, huli sa dulo, at ang natitira na may pantay na mga puwang sa pagitan. Ayon sa Material Design Guidelines, 2025, ang SpaceBetween ay optimal para sa mga panel ng tool at mga hilera ng nabigasyon.

Ang parameter na verticalAlignment ay nag-aayos ng mga elemento nang patayo. Ang Alignment.Top, Alignment.CenterVertically at Alignment.Bottom ay magagamit. Ang property na ito ay kapaki-pakinabang kapag ang mga elemento ng Row ay may iba't ibang taas — halimbawa, isang icon sa tabi ng multi-line na teksto.

Talaan ng mga halaga ng Arrangement

Pamamahagi ng espasyo gamit ang Modifier.weight

Modifier.weight — ay isang modifier na magagamit lamang sa loob ng Row at Column, na namamahagi ng magagamit na espasyo sa pagitan ng mga child element ayon sa tinukoy na halaga. Kung ang isang elemento ay may bigat na 1.0f at ang isa ay 2.0f, ang pangalawang elemento ay kukuha ng dalawang beses na mas maraming espasyo.

Ang mga elementong walang weight ay kumukuha ng espasyo na kailangan para sa kanilang nilalaman. Ang natitirang espasyo ay ipinamamahagi sa mga elementong may weight ayon sa kanilang bigat. Ang pag-uugaling ito ay kahalintulad sa property na flex-grow sa CSS Flexbox.

Ayon sa Android Developer Documentation, 2025, ang weight ay gumagana lamang sa loob ng Row, Column at BoxWithConstraints. Kapag gumagamit ng weight sa Row, lahat ng child element ay sinusukat sa dalawang pass: una ang mga elementong walang weight, pagkatapos ang mga elementong may weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "Kaliwa",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Kanan")
    }
}

Mga halimbawa ng code gamit ang Row

Ang unang halimbawa ay nagpapakita ng Row na may icon at teksto — isang tipikal na senaryo para sa listahan ng contact o mga setting. Icon at Text ay nakabalot sa Row na naka-center ang verticalAlignment.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "Idagdag sa mga paborito")
    }
}

Ang pangalawang halimbawa ay nagpapakita ng Row na may mga pindutan at pantay na pamamahagi. Ginagarantiyahan ng SpaceEvenly ang pantay na mga puwang sa pagitan ng lahat ng pindutan at mga gilid ng lalagyan.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Kanselahin") }
        Button(onClick = {}) { Text("I-save") }
    }
}

Ang pangatlong halimbawa — Row sa loob ng Card para sa pagpapakita ng rating. Ang nested Row na may Modifier.weight ay nagpapahintulot sa bituin ng rating at numerikong halaga na kumuha ng nakapirming espasyo.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Rating:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

Mga katangian ng Row sa adaptive layout

Row ay nangangailangan ng kontrol sa lapad sa adaptive layout. Kung ang nilalaman ng Row ay lumampas sa magagamit na lapad ng screen, ang mga elemento ay maaaring lumabas sa mga hangganan ng lalagyan. Upang maiwasan ito, gamitin ang Modifier.horizontalScroll o lumipat sa Column.

Kapag pinagsasama ang Row sa Modifier.weight, mahalagang itakda ang fillMaxWidth para sa parent na Row — kung hindi, ang weight ay mamamahagi ng hindi umiiral na espasyo. Ayon sa Material Design Guidelines, 2025, ang Row na may weight na walang fillMaxWidth ay itinuturing na hindi tamang konpigurasyon.

Para sa mga adaptive interface, inirerekomenda na pagsamahin ang Row sa Box o gamitin ang Arrangement.SpaceBetween para sa awtomatikong pamamahagi ng mga elemento sa iba't ibang laki ng screen. Ito ay nagbibigay ng flexibility nang walang media queries.

• Modifier.horizontalScroll — nagdaragdag ng pag-scroll kapag umaapaw ang Row
• Modifier.weight — namamahagi ng espasyo nang proporsyonal
• Arrangement.SpaceBetween — adaptive na pamamahagi na may pagkakabit sa mga gilid