Jetpack Compose'ta Row: nedir, composable özellikleri ve nasıl çalışır

Jetpack Compose'ta Row Nedir

Row, alt öğeleri yatay bir sıraya yerleştiren bir composable işlevidir. Compose düzen hiyerarşisinde Row, Column ve Box ile birlikte temel bir kapsayıcı konumundadır.

Row, boyut belirtmeyi gerektirmez — içeriğine göre otomatik olarak ayarlanır. Row'un genişliği, Modifier.fillMaxWidth veya sabit bir boyut belirtilmediği sürece dolgu dahil alt öğelerin genişliklerinin toplamına eşittir.

Row'un alt öğeleri, kapsayıcı içindeki konumlarını etkileyen kendi değiştiricilerine sahip olabilir. Örneğin, Modifier.weight, öğelerin kullanılabilir alanın orantılı bir bölümünü kaplamasına izin verir.

Android Developers Blog, 2024'e göre Row, alt öğeleri sırayla işler ve Compose ölçüm kurallarına göre boyutlarını hesaplar: önce weight'siz öğeler ölçülür, ardından kalan alan weight'li öğeler arasında dağıtılır.

Row Sözdizimi ve Temel İmza

Row'un temel imzası modifier parametresini, horizontalArrangement ve verticalAlignment'ı içerir. Tüm alt öğeler, son içerik lambda bloğunda iletilir.

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

Row Özellikleri: horizontalArrangement ve verticalAlignment

horizontalArrangement parametresi, Row içinde alt öğelerin yatay eksen boyunca nasıl dağıtılacağını belirler. Arrangement sınıfından Start, End, Center, SpaceBetween, SpaceAround ve SpaceEvenly değerleri mevcuttur.

Arrangement.Start öğeleri kapsayıcının başına, Arrangement.End — sonuna ve Arrangement.Center — ortasına yerleştirir. Bu değerler, CSS Flexbox'daki justify-content özelliğine benzer şekilde çalışır.

Arrangement.SpaceBetween, ilk öğeyi başa, son öğeyi sona ve kalanları aralarında eşit boşluklarla olacak şekilde eşit olarak dağıtır. Material Design Guidelines, 2025'e göre SpaceBetween, araç çubukları ve gezinme satırları için idealdir.

verticalAlignment parametresi öğeleri dikey olarak hizalar. Alignment.Top, Alignment.CenterVertically ve Alignment.Bottom değerleri mevcuttur. Bu özellik, Row öğelerinin farklı yüksekliklere sahip olduğunda — örneğin, çok satırlı metnin yanındaki bir simge — kullanışlıdır.

Arrangement Değerleri Tablosu

Modifier.weight ile Alan Dağılımı

Modifier.weight, yalnızca Row ve Column içinde kullanılabilen ve belirtilen değerle orantılı olarak alt öğeler arasında kullanılabilir alanı dağıtan bir değiştiricidir. Bir öğenin ağırlığı 1.0f ve diğerinin 2.0f ise, ikinci öğe iki kat daha fazla alan kaplar.

Weight'siz öğeler, içerikleri için gereken alanı kaplar. Kalan alan, weight'li öğeler arasında ağırlıklarıyla orantılı olarak dağıtılır. Bu davranış, CSS Flexbox'daki flex-grow özelliğine benzer.

Android Developer Documentation, 2025'e göre weight, yalnızca Row, Column ve BoxWithConstraints içinde çalışır. Row'da weight kullanılırken, tüm alt öğeler iki geçişte ölçülür: önce weight'siz öğeler, ardından weight'li öğeler.

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

Row ile Kod Örnekleri

İlk örnek, bir simge ve metinle Row gösterir — kişi listesi veya ayarlar için tipik bir senaryo. Icon ve Text, verticalAlignment ortalanmış olarak Row içine sarılır.

@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 = "Favorilere ekle")
    }
}

İkinci örnek, düğmeler ve eşit dağılımla Row gösterir. SpaceEvenly, tüm düğmeler ve kapsayıcının kenarları arasında eşit boşluk sağlar.

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

Üçüncü örnek — bir derecelendirme görüntülemek için Card içinde Row. Modifier.weight ile iç içe bir Row, derecelendirme yıldızının ve sayısal değerin sabit alan kaplamasını sağlar.

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

Uyarlanabilir Düzende Row Özellikleri

Row, uyarlanabilir düzende genişlik kontrolü gerektirir. Row içeriği mevcut ekran genişliğini aşarsa, öğeler kapsayıcı sınırlarının dışına taşabilir. Bunu önlemek için Modifier.horizontalScroll kullanın veya Column'a geçin.

Row'u Modifier.weight ile birleştirirken, üst Row için fillMaxWidth ayarlamak önemlidir — aksi takdirde weight var olmayan alanı dağıtır. Material Design Guidelines, 2025'e göre, fillMaxWidth olmadan weight'li Row geçersiz bir yapılandırma olarak kabul edilir.

Uyarlanabilir arayüzler için Row'u Box ile birleştirmeniz veya farklı ekran boyutlarında otomatik öğe dağılımı için Arrangement.SpaceBetween kullanmanız önerilir. Bu, medya sorguları olmadan esneklik sağlar.

• Modifier.horizontalScroll — Row taştığında kaydırma ekler
• Modifier.weight — alanı orantılı olarak dağıtır
• Arrangement.SpaceBetween — kenar sabitlemeli uyarlanabilir dağılım