Column: Compose-da şaquli yerləşdirmə və konteyner konfiqurasiyası

Jetpack Compose-da Column nədir

Column — modifier, verticalArrangement, horizontalAlignment və content — ColumnScope ilə lambda qəbul edən Composable funksiyasıdır. Column daxilində uşaq Composable funksiyaları bəyan edilmə sırası ilə yuxarıdan aşağıya yerləşdirilir. Column-un hündürlüyü uşaq elementlərin hündürlüklərinin cəminə üstəgəl Arrangement tərəfindən təyin edilmiş məkan bərabərdir. Eni — Alignment nəzərə alınmaqla uşaq elementin maksimum eninə görədir.

Column görünməz konteynerdir: onun defolt olaraq öz fonu və ya sərhədi yoxdur. Fon lazımdırsa — birbaşa Column-a Modifier.background() əlavə edin. LazyColumn-dan fərqli olaraq, Column bütün uşaq elementləri eyni anda göstərir və virtualizasiyanı dəstəkləmir. Bu o deməkdir ki, Column yalnız kiçik verilənlər dəstləri üçün uyğundur — 10-15 elementə qədər. Uzun siyahılar üçün LazyColumn istifadə edin.

ColumnScope — Column-un content lambdası üçün receiver-dir. O, yalnız Column daxilində işləyən əlavə modifikatorlar təqdim edir: weight(), align(), alignByBaseline(). Bu modifikatorlar Column xaricində mənasızdır, çünki onlar şaquli yerləşdirmənin spesifikasına əsaslanır. Məsələn, Modifier.align(Alignment.CenterHorizontally) uşaq elementi Column-un mərkəzinə üfüqi olaraq düzləyir.

Column parametrləri: Arrangement, Alignment, Modifier

VerticalArrangement elementlər arasında şaquli məkanın necə bölüşdürüləcəyini müəyyən edir. Mövcud dəyərlər: Arrangement.Top (defolt), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Column-un hündürlüyü elementlərin hündürlüklərinin cəmindən böyükdürsə, Arrangement boş məkanı bölüşdürür. Elementlər bütün hündürlüyü tutursa — Arrangement təsir göstərmir.

HorizontalAlignment hər bir uşaq elementin üfüqi düzlənməsini təyin edir. Alignment.Start (defolt, LTR), CenterHorizontally, End. Alignment hər bir elementə müstəqil təsir edir: bir element dar, digəri genişdirsə — birincisi düzlənəcək, ikincisi Column-un sərhədlərini aşa bilər. Alignment yalnız Column-un sabit eni və ya fillMaxWidth olduqda işləyir.

Column üçün Modifier: Column konteynerin özünə tətbiq olunan Modifier qəbul edir. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — bütün standart modifikatorlar işləyir. Xüsusiyyət: Modifier.height(IntrinsicSize.Min) Column-u Intrinsic measurement nəzərə alaraq uşaq elementlər əsasında minimal hündürlüyü hesablamağa məcbur edir.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Yuxarı", modifier = Modifier.background(Color.Cyan))
        Text("Orta", modifier = Modifier.background(Color.Magenta))
        Text("Aşağı", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column hündürlüyü məzmuna uyğunlaşdırır
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Qısa mətn")
        Text("Sütunda sarınacaq çox uzun mətn")
    }
}

Column weight: elementlər arasında məkanın bölüşdürülməsi

Modifier.weight() — Column daxilində boş şaquli məkanı elementlər arasında göstərilən çəkilərə mütənasib olaraq bölüşdürən ColumnScope modifikatorudur. Column 400dp hündürlük tutursa, uşaq elementlər isə cəmi 100dp-dirsə, qalan 300dp weight elementləri arasında bölünür. weight(2f) olan element weight(1f) olan elementdən iki dəfə çox məkan alır.

fill — weight-in ikinci parametridir: weight(weight: Float, fill: Boolean = true). fill = true (defolt) olduqda, element bütün mövcud hündürlüyə qədər uzanır. fill = false olduqda — element yalnız öz intrinsic-hündürlüyünü tutur, qalan məkan boş qalır. Bu, element bir tərəfə sıxılmalı olduqda, lakin weight yalnız boş yerin bölüşdürülmə nisbətini təyin etdikdə faydalıdır.

Weight məhdudiyyətləri: weight yalnız sabit hündürlüyü və ya fillMaxHeight() olan Column-da işləyir. Column-un hündürlüyü uşaq elementlər tərəfindən müəyyən edilirsə (wrap content), çəkilər mənasızdır — bölüşdürmək üçün boş məkan yoxdur. Həmçinin weight eyni elementdə Modifier.height() ilə birləşdirilə bilməz — onlar ziddiyyət təşkil edir və weight nəzərə alınmır.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Hündürlüyün 1/6 hissəsini tutur (çəki 1, cəmi 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Hündürlüyün 2/6 hissəsini tutur
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Hündürlüyün 3/6 hissəsini tutur
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: nə vaxt nəyi istifadə etməli

Column bütün uşaq elementləri dərhal göstərir. Elementlər 10-15-dən çox olarsa, Column kompozisiya və ölçmə üçün əhəmiyyətli yük yaradır. LazyColumn isə əksinə, yalnız görünən elementləri render edir və görünməyənləri təkrar istifadə edir. Uzun siyahılar, minlərlə elementli siyahılar, sonsuz siyahılar və ya çatlar üçün — LazyColumn məcburidir.

Column nə vaxt daha yaxşıdır: formalı ekranlar (3-10 sahə), profil kartları, işarələrlə şaquli sütunlar, menyu. Column həmçinin IntrinsicSize-i dəstəkləyir, bu adaptiv hündürlük üçün faydalıdır. Bundan əlavə, Column sazlamada daha asandır — virtualizasiya yoxdur, bütün elementlər Layout Inspector-da görünür. Statik UI üçün Column düzgün seçimdir.

LazyColumn təmin edir: item caching, key-based identity, əlavə/silmə animasiyası (animateItemPlacement), sticky headers. Siyahıda müxtəlif tipli elementlər varsa (müxtəlif viewType) — items-da sealed class ilə LazyColumn istifadə edin. Column sticky headers-i dəstəkləmir (onları scrollable Column vasitəsilə emulyasiya etmək lazımdır). LazyColumn həmçinin GridCells istifadə edərkən LazyVerticalGrid-i dəstəkləyir.

Column istifadəsinin praktik nümunələri

İstifadəçi profili ekranına baxaq, burada Column avatar, ad, bio və fəaliyyət düymələri üçün əsas konteyner kimi istifadə olunur. Burada Column IntrinsicSize.Min ilə məzmuna uyğunlaşır, weight isə bölmələr arasında məkanı bölüşdürmək üçün tətbiq edilir.

@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)
            )
            // Ad
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Fəaliyyət düymələri
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Mesaj") }
                OutlinedButton(onClick = { }) { Text("İzlə") }
            }
        }
    }
}

Nümunədə Column elementlər arasında bərabər boşluqlar üçün Arrangement.spacedBy(8.dp) istifadə edir. horizontalAlignment = CenterHorizontally avatar, ad və bio-nu mərkəzləşdirir. Column daxilində Row — düymələr üçün bir sətirdə yerləşən iç-içə konteynerdir. Column (şaquli yerləşdirmə) və Row (üfüqi yerləşdirmə) birləşməsi Compose-da UI qurmağın tipik nümunəsidir.