Row Jetpack Compose-da: bu nima, composable xususiyatlari va qanday ishlaydi

Jetpack Compose-da Row nima

Row — bola elementlarni gorizontal ketma-ketlikda joylashtiradigan composable funksiya. Compose layoutlari iyerarxiyasida Row Column va Box bilan birga asosiy konteyner o'rnini egallaydi.

Row o'lchamlarni ko'rsatishni talab qilmaydi — u avtomatik ravishda mazmunga moslashadi. Row kengligi, Modifier.fillMaxWidth yoki qat'iy o'lcham o'rnatilmagan bo'lsa, bo'shliqlarni hisobga olgan holda bola elementlar kengliklari yig'indisiga teng.

Row ning bola elementlari konteyner ichida o'z o'rniga ta'sir qiladigan o'z modifikatorlariga ega bo'lishi mumkin. Masalan, Modifier.weight elementlarga mavjud joyning mutanosib qismini egallashga imkon beradi.

Android Developers Blog, 2024-ga ko'ra, Row bola elementlarini ketma-ket qayta ishlaydi, ularning o'lchamlarini Compose o'lchash qoidalari asosida hisoblab chiqadi: avval weightsiz elementlar o'lchanadi, keyin qolgan joy weightga ega elementlar o'rtasida taqsimlanadi.

Row sintaksisi va asosiy imzosi

Row ning asosiy imzosi modifier, horizontalArrangement va verticalAlignment parametrlarini o'z ichiga oladi. Barcha bola elementlar oxirgi lambda content blokida uzatiladi.

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

Row xususiyatlari: horizontalArrangement va verticalAlignment

horizontalArrangement parametri bola elementlarning Row ichida gorizontal o'q bo'ylab qanday taqsimlanishini aniqlaydi. Arrangement sinfidan Start, End, Center, SpaceBetween, SpaceAround va SpaceEvenly qiymatlari mavjud.

Arrangement.Start elementlarni konteyner boshida, Arrangement.End — oxirida, Arrangement.Center esa markazda joylashtiradi. Bu qiymatlar CSS Flexbox-dagi justify-content xususiyatiga o'xshab ishlaydi.

Arrangement.SpaceBetween elementlarni teng taqsimlaydi, birinchi elementni boshda, oxirgini oxirda, qolganlarini esa orasida teng bo'shliqlar bilan joylashtiradi. Material Design Guidelines, 2025-ga ko'ra, SpaceBetween asboblar paneli va navigatsiya qatorlari uchun maqbuldir.

verticalAlignment parametri elementlarni vertikal tekislaydi. Alignment.Top, Alignment.CenterVertically va Alignment.Bottom qiymatlari mavjud. Bu xususiyat Row elementlari turli balandlikka ega bo'lganda foydali — masalan, ko'p qatorli matn yonidagi ikonka.

Arrangement qiymatlari jadvali

Modifier.weight bilan joy taqsimlash

Modifier.weight — faqat Row va Column ichida mavjud bo'lgan modifikator bo'lib, mavjud joyni bola elementlar o'rtasida ko'rsatilgan qiymatga mutanosib taqsimlaydi. Agar bir element 1.0f vaznga, boshqasi 2.0f vaznga ega bo'lsa, ikkinchi element ikki barobar ko'proq joy egallaydi.

Weight ko'rsatilmagan elementlar o'z mazmuni uchun kerakli joyni egallaydi. Qolgan joy weightga ega elementlar o'rtasida ularning vazniga mutanosib taqsimlanadi. Bu xatti-harakat CSS Flexbox-dagi flex-grow xususiyatiga o'xshaydi.

Android Developer Documentation, 2025-ga ko'ra, weight faqat Row, Column va BoxWithConstraints ichida ishlaydi. Rowda weight ishlatilganda, barcha bola elementlar ikki bosqichda o'lchanadi: avval weightsiz elementlar, keyin weightga ega elementlar.

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

Row bilan kod misollari

Birinchi misol ikonka va matn bilan Row-ni ko'rsatadi — kontaktlar ro'yxati yoki sozlamalar uchun odatiy stsenariy. Icon va Text markazlashtirilgan verticalAlignment bilan Row-ga o'ralgan.

@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 = "Sevimlilarga qo'shish")
    }
}

Ikkinchi misol tugmalar va teng taqsimlash bilan Row-ni ko'rsatadi. SpaceEvenly barcha tugmalar va konteyner chekkalari o'rtasida teng bo'shliqlarni kafolatlaydi.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Bekor qilish") }
        Button(onClick = {}) { Text("Saqlash") }
    }
}

Uchinchi misol — reytingni ko'rsatish uchun Card ichidagi Row. Modifier.weight bilan ichki Row reyting yulduzchasi va raqamli qiymatga qat'iy joy egallashga imkon beradi.

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

Adaptiv dizaynda Row xususiyatlari

Row adaptiv dizaynda kenglik nazoratini talab qiladi. Agar Row mazmuni ekranning mavjud kengligidan oshsa, elementlar konteyner chegaralaridan chiqib ketishi mumkin. Buning oldini olish uchun Modifier.horizontalScroll yoki Column-ga o'tishdan foydalaning.

Row-ni Modifier.weight bilan birlashtirganda, ota Row uchun fillMaxWidth o'rnatish muhim — aks holda weight mavjud bo'lmagan joyni taqsimlaydi. Material Design Guidelines, 2025-ga ko'ra, fillMaxWidthsiz weight bilan Row noto'g'ri konfiguratsiya hisoblanadi.

Adaptiv interfeyslar uchun Row-ni Box bilan birlashtirish yoki turli ekran o'lchamlarida elementlarning avtomatik taqsimlanishi uchun Arrangement.SpaceBetween dan foydalanish tavsiya etiladi. Bu media so'rovlarisiz moslashuvchanlikni ta'minlaydi.

• Modifier.horizontalScroll — Row to'lib ketganda aylantirish qo'shadi
• Modifier.weight — joyni mutanosib taqsimlaydi
• Arrangement.SpaceBetween — chekkalarda fiksatsiya bilan adaptiv taqsimlash