Column: Compose'da dikey düzen ve konteyner yapılandırması

Jetpack Compose'da Column Nedir

Column, isteğe bağlı parametreler alan bir Composable işlevidir: modifier, verticalArrangement, horizontalAlignment ve content — ColumnScope ile bir lambda. Column içinde, alt Composable işlevleri bildirim sırasına göre yukarıdan aşağıya sıralanır. Column'un yüksekliği, alt öğelerin yüksekliklerinin toplamı artı Arrangement tarafından belirtilen alana eşittir. Genişlik, Alignment dikkate alınarak maksimum alt öğe genişliğine eşittir.

Column görünmez bir konteynırdır: varsayılan olarak arka planı veya kenarlığı yoktur. Arka plana ihtiyacınız varsa, Column'un kendisine Modifier.background() ekleyin. LazyColumn'un aksine, Column tüm alt öğeleri aynı anda oluşturur ve sanallaştırmayı desteklemez. Bu, Column'un yalnızca küçük veri kümeleri için uygun olduğu anlamına gelir — 10-15 öğeye kadar. Uzun listeler için LazyColumn kullanın.

ColumnScope, Column'un content lambdası için alıcıdır. Yalnızca Column içinde çalışan ek değiştiriciler sağlar: weight(), align(), alignByBaseline(). Bu değiştiriciler, dikey düzenin özelliklerine dayandıkları için Column dışında bir anlam ifade etmez. Örneğin, Modifier.align(Alignment.CenterHorizontally) bir alt öğeyi Column'un ortasına yatay olarak hizalar.

Column Parametreleri: Arrangement, Alignment, Modifier

VerticalArrangement, öğeler arasında dikey alanın nasıl dağıtılacağını belirler. Mevcut değerler: Arrangement.Top (varsayılan), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Column'un yüksekliği, öğelerin yüksekliklerinin toplamından büyükse, Arrangement boş alanı dağıtır. Öğeler tüm yüksekliği kaplıyorsa, Arrangement'ın etkisi olmaz.

HorizontalAlignment, her alt öğenin yatay hizalamasını ayarlar. Alignment.Start (LTR için varsayılan), CenterHorizontally, End. Alignment her öğe üzerinde bağımsız olarak çalışır: bir öğe dar ve diğeri genişse, ilki hizalanır, ikincisi Column sınırlarının dışına çıkabilir. Alignment yalnızca Column'un sabit bir genişliği veya fillMaxWidth'i varsa çalışır.

Column için Modifier: Column, konteynırın kendisine uygulanan bir Modifier kabul eder. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — tüm standart değiştiriciler çalışır. Özel not: Modifier.height(IntrinsicSize.Min), Intrinsic ölçümünü kullanarak alt öğelere dayalı minimum yüksekliği hesaplamaya Column'u zorlar.

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

    // IntrinsicSize: Column yüksekliği içeriğe göre ayarlar
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Kısa metin")
        Text("Sütun içinde sarılacak çok uzun bir metin")
    }
}

Column weight: öğeler arasında alan dağılımı

Modifier.weight(), Column öğeleri arasındaki boş dikey alanı belirtilen ağırlıklara orantılı olarak dağıtan bir ColumnScope değiştiricisidir. Column 400dp yükseklik kaplıyorsa ve alt öğeler toplam 100dp ise, kalan 300dp ağırlık öğeleri arasında bölünür. weight(2f) olan bir öğe, weight(1f) olan bir öğeden iki kat daha fazla alan alır.

fill — weight'in ikinci parametresi: weight(weight: Float, fill: Boolean = true). fill = true (varsayılan) ise, öğe mevcut tüm yüksekliğe kadar uzanır. fill = false ise, öğe yalnızca kendi içsel yüksekliğini alır ve kalan alan boş kalır. Bu, bir öğenin bir tarafa yapışması gerektiğinde ancak weight yalnızca boş alan dağılımının oranını tanımladığında kullanışlıdır.

Weight sınırlamaları: weight yalnızca sabit yükseklik veya fillMaxHeight() olan Column'da çalışır. Column'un yüksekliği alt öğeler tarafından belirleniyorsa (wrap content), ağırlıklar anlamsızdır — dağıtılacak boş alan yoktur. Ayrıca, weight aynı öğede Modifier.height() ile birleştirilemez — çakışırlar ve weight yok sayılır.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Yüksekliğin 1/6'sını alır (weight 1, toplam 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Yüksekliğin 2/6'sını alır
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Yüksekliğin 3/6'sını alır
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: ne zaman hangisi kullanılır

Column tüm alt öğeleri hemen oluşturur. 10-15'ten fazla öğe varsa, Column kompozisyon ve ölçüm üzerinde önemli bir yük oluşturur. LazyColumn ise yalnızca görünür öğeleri oluşturur ve görünmeyenleri yeniden kullanır. Uzun listeler, binlerce öğeli listeler, sonsuz listeler veya sohbetler için — LazyColumn zorunludur.

Column ne zaman daha iyidir: form ekranları (3-10 alan), profil kartları, simgeli dikey sütunlar, menüler. Column ayrıca IntrinsicSize'ı destekler, bu uyarlanabilir yükseklik için kullanışlıdır. Ayrıca, Column'da hata ayıklamak daha kolaydır — sanallaştırma yok, tüm öğeler Layout Inspector'da görünür. Statik UI için Column doğru seçimdir.

LazyColumn şunları sağlar: öğe önbellekleme, anahtar tabanlı kimlik, ekleme/silme animasyonu (animateItemPlacement), sabit başlıklar (sticky headers). Liste farklı türde öğeler içeriyorsa (farklı viewType), items içinde sealed class ile LazyColumn kullanın. Column sabit başlıkları desteklemez (kaydırılabilir Column aracılığıyla öykünmeleri gerekir). Ayrıca LazyColumn, GridCells kullanırken LazyVerticalGrid'ı destekler.

Column Kullanımına Pratik Örnekler

Column'un avatar, isim, biyografi ve eylem düğmeleri için ana konteyner olarak kullanıldığı bir kullanıcı profili ekranına bakalım. Burada, IntrinsicSize.Min ile Column içeriğe göre ayarlanır ve weight, bölümler arasında alan dağıtmak için kullanılır.

@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)
            )
            // İsim
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Biyografi
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Eylem düğmeleri
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Mesaj") }
                OutlinedButton(onClick = { }) { Text("Takip et") }
            }
        }
    }
}

Örnekte Column, öğeler arasında eşit boşluk için Arrangement.spacedBy(8.dp) kullanır. horizontalAlignment = CenterHorizontally avatar, isim ve biyografiyi ortalar. Column içindeki Row, bir satırdaki düğmeler için iç içe geçmiş bir konteynerdir. Column (dikey düzen) ve Row (yatay düzen) kombinasyonu, Compose'ta tipik bir UI oluşturma modelidir.