Column: vertikal joylashtirish va konteynerni sozlash Compose-da

Jetpack Compose-da Column nima

Column — modifier, verticalArrangement, horizontalAlignment va content — ColumnScope bilan lambda qabul qiluvchi Composable funksiyadir. Column ichida bola Composable funksiyalari e'lon qilish tartibida yuqoridan pastga joylashtiriladi. Column balandligi bola elementlarning balandliklari yig'indisiga Arrangement tomonidan belgilangan bo'shliq qo'shilganiga teng. Kengligi — Alignment hisobga olingan holda bola elementning maksimal kengligi bo'yicha.

Column ko'rinmas konteynerdir: standart holatda o'z fon yoki chegarasiga ega emas. Agar fon kerak bo'lsa — Column-ning o'ziga Modifier.background() qo'shing. LazyColumn-dan farqli o'laroq, Column barcha bola elementlarni bir vaqtning o'zida ko'rsatadi va virtualizatsiyani qo'llab-quvvatlamaydi. Bu shuni anglatadiki, Column faqat kichik ma'lumotlar to'plamlari uchun mos keladi — 10-15 elementgacha. Uzun ro'yxatlar uchun LazyColumn-dan foydalaning.

ColumnScope — Column content lambdasi uchun receiver. U faqat Column ichida ishlaydigan qo'shimcha modifikatorlarni taqdim etadi: weight(), align(), alignByBaseline(). Bu modifikatorlar Column tashqarisida ma'noga ega emas, chunki ular vertikal joylashtirish xususiyatlariga tayanadi. Masalan, Modifier.align(Alignment.CenterHorizontally) bola elementni Column markaziga gorizontal ravishda tekislaydi.

Column parametrlari: Arrangement, Alignment, Modifier

VerticalArrangement elementlar orasidagi vertikal bo'shliq qanday taqsimlanishini belgilaydi. Mavjud qiymatlar: Arrangement.Top (standart), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Agar Column balandligi elementlar balandliklari yig'indisidan katta bo'lsa, Arrangement bo'sh joyni taqsimlaydi. Agar elementlar butun balandlikni egallasa — Arrangement ta'sir qilmaydi.

HorizontalAlignment har bir bola elementning gorizontal tekislanishini o'rnatadi. Alignment.Start (standart, LTR), CenterHorizontally, End. Alignment har bir elementga mustaqil ta'sir qiladi: agar bir element tor, ikkinchisi keng bo'lsa — birinchisi tekislanadi, ikkinchisi Column chegaralaridan chiqib ketishi mumkin. Alignment faqat Column qat'iy kenglikka yoki fillMaxWidth-ga ega bo'lganda ishlaydi.

Column uchun Modifier: Column konteynerning o'ziga qo'llaniladigan Modifier-ni qabul qiladi. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — barcha standart modifikatorlar ishlaydi. Xususiyat: Modifier.height(IntrinsicSize.Min) Column-ni Intrinsic measurement hisobga olgan holda bola elementlar asosida minimal balandlikni hisoblashga majbur qiladi.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Yuqori", modifier = Modifier.background(Color.Cyan))
        Text("O'rta", modifier = Modifier.background(Color.Magenta))
        Text("Past", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column balandlikni mazmunga moslashtiradi
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Qisqa matn")
        Text("Ustunga o'raladigan juda uzun matn")
    }
}

Column weight: elementlar orasida bo'shliqni taqsimlash

Modifier.weight() — Column ichida vertikal bo'sh joyni elementlar o'rtasida belgilangan og'irliklarga mutanosib taqsimlovchi ColumnScope modifikatoridir. Agar Column 400dp balandlikni egallasa, bola elementlar esa jami 100dp bo'lsa, qolgan 300dp weight elementlari o'rtasida taqsimlanadi. weight(2f) bo'lgan element weight(1f) bo'lgan elementdan ikki barobar ko'p joy oladi.

fill — weight-ning ikkinchi parametri: weight(weight: Float, fill: Boolean = true). Agar fill = true (standart) bo'lsa, element butun mavjud balandlikka cho'ziladi. Agar fill = false bo'lsa — element faqat o'z intrinsic-balandligini egallaydi, qolgan bo'sh joy bo'sh qoladi. Bu element bir tomonga siqilishi kerak bo'lganda, lekin weight faqat bo'sh joyni taqsimlash nisbatini belgilaganda foydalidir.

Weight cheklovlari: weight faqat qat'iy balandlikka yoki fillMaxHeight()-ga ega Column-da ishlaydi. Agar Column balandligi bola elementlar tomonidan aniqlansa (wrap content), og'irliklar ma'noga ega emas — taqsimlash uchun bo'sh joy yo'q. Shuningdek, weight bir xil elementda Modifier.height() bilan birlashtirilmaydi — ular ziddiyatli va weight e'tiborga olinmaydi.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Balandlikning 1/6 qismini egallaydi (og'irlik 1, jami 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Balandlikning 2/6 qismini egallaydi
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Balandlikning 3/6 qismini egallaydi
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: qachon nimani ishlatish

Column barcha bola elementlarni birdaniga ko'rsatadi. Agar elementlar 10-15 dan ko'p bo'lsa, Column kompozitsiya va o'lchash uchun sezilarli yuk hosil qiladi. LazyColumn, aksincha, faqat ko'rinadigan elementlarni render qiladi va ko'rinmaslarni qayta ishlatadi. Uzun ro'yxatlar, minglab elementli ro'yxatlar, cheksiz ro'yxatlar yoki chatlar uchun — LazyColumn majburiydir.

Column qachon yaxshiroq: formalar bilan ekranlar (3-10 maydon), profil kartalari, belgilar bilan vertikal ustunlar, menyu. Column shuningdek IntrinsicSize-ni qo'llab-quvvatlaydi, bu adaptiv balandlik uchun foydalidir. Bundan tashqari, Column tuzatishda osonroq — virtualizatsiya yo'q, barcha elementlar Layout Inspector-da ko'rinadi. Statik UI uchun Column to'g'ri tanlovdir.

LazyColumn ta'minlaydi: item caching, key-based identity, qo'shish/o'chirish animatsiyasi (animateItemPlacement), sticky headers. Agar ro'yxat har xil turdagi elementlarni o'z ichiga olsa (turli viewType) — items ichida sealed class bilan LazyColumn-dan foydalaning. Column sticky headers-ni qo'llab-quvvatlamaydi (ularni scrollable Column orqali emulyatsiya qilish kerak). LazyColumn shuningdek GridCells dan foydalanganda LazyVerticalGrid-ni qo'llab-quvvatlaydi.

Column-dan foydalanishning amaliy misollari

Foydalanuvchi profili ekranini ko'rib chiqamiz, bu erda Column avatar, ism, bio va harakat tugmalari uchun asosiy konteyner sifatida ishlatiladi. Bu erda Column IntrinsicSize.Min bilan mazmunga moslashadi, weight esa bo'limlar orasida bo'shliqni taqsimlash uchun qo'llaniladi.

@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)
            )
            // Ism
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Harakat tugmalari
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Xabar") }
                OutlinedButton(onClick = { }) { Text("Kuzatish") }
            }
        }
    }
}

Misolda Column elementlar orasida bir xil bo'shliqlar uchun Arrangement.spacedBy(8.dp) dan foydalanadi. horizontalAlignment = CenterHorizontally avatar, ism va bio-ni markazlashtiradi. Column ichidagi Row — tugmalar uchun bir qatorda joylashgan ichki konteyner. Column (vertikal joylashtirish) va Row (gorizontal joylashtirish) kombinatsiyasi Compose-da UI qurishning odatiy namunasidir.