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

Jetpack Compose'ta Box Nedir?

Box, alt öğeleri aynı alana yerleştirip üst üste yığan bir composable işlevidir. İlk alt öğe en altta, son alt öğe en üstte çizilir. Varsayılan olarak Box, en büyük alt öğenin boyutuna göre ayarlanır.

Row ve Column'un aksine Box, öğeleri sıralı olarak düzenlemez — tüm alt öğeler aynı alanı kaplar ve birbirleriyle örtüşebilir. Bu, Box'ı arayüz katmanları oluşturmak için vazgeçilmez kılar.

Box'ın boyutu şu kurala göre belirlenir: hiçbir alt öğenin sabit boyutu yoksa Box minimum boyuta küçülür. En az bir alt öğe Modifier.fillMaxSize'a sahipse Box maksimuma kadar genişler.

Android Developers Blog, 2024'e göre Box, öğelerin sıralı düzenleme gerektirmediği durumlarda Compose'taki en verimli kapsayıcıdır. Box, Row ve Column'un aksine konumlandırma için ek ölçümler yapmaz.

Box Temel İmzası

Box, modifier, contentAlignment ve propagateMinConstraints parametrelerini kabul eder. Tüm alt öğeler content bloğuna iletilir ve her biri kendi değiştiricilerine sahip olabilir.

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier.size(200.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.fillMaxSize().background(Color.Blue)
        )
        Text(
            text = "Merhaba",
            color = Color.White
        )
    }
}

Box'ta ContentAlignment ve Modifier.align

contentAlignment, tüm alt öğeler için varsayılan hizalamayı ayarlayan bir Box parametresidir. Belirtilmezse Alignment.TopStart kullanılır — öğeler kapsayıcının sol üst köşesine yerleştirilir.

Modifier.align, contentAlignment'dan bağımsız olarak belirli bir alt öğenin hizalamasını geçersiz kılmanıza olanak tanır. Örneğin, Alignment.Center olan bir Box, Modifier.align(Alignment.BottomEnd) ile sağ alt köşeye sabitlenecek bir öğe içerebilir.

Material Design Guidelines, 2025'e göre Modifier.align, arka plan görüntüleri üzerinde rozetler ve simgeler konumlandırmak için kullanışlıdır. Bu, Box'ın tüm içeriği için genel bir hizalama ayarlamanıza ve bunu tek tek öğeler için geçersiz kılmanıza olanak tanır.

Alignment Değerleri Tablosu

Modifier.align ile Örnek

Bu örnekte Box, bir arka plan görseli ve sağ alt köşede bir rozet içerir. Modifier.align(BottomEnd), rozeti Box'ın contentAlignment'ından bağımsız olarak konumlandırır.

@Composable
fun BadgeExample() {
    Box(
        modifier = Modifier.size(120.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.size(100.dp).background(Color.Gray)
        )
        Box(
            modifier = Modifier
                .size(30.dp)
                .align(Alignment.BottomEnd)
                .background(Color.Red, CircleShape)
        )
    }
}

zIndex ile Katman Yönetimi

Modifier.zIndex, Box içindeki öğelerin çizim sırasını kontrol eder. Varsayılan olarak öğeler bildirim sırasına göre çizilir — ilk öğe en altta, son öğe en üstte. zIndex bu sırayı geçersiz kılar.

zIndex 2.0f olan bir öğe, kod içindeki sıralarından bağımsız olarak zIndex 1.0f olan bir öğenin üzerine çizilir. Negatif zIndex değerleri bir öğeyi diğerlerinin altına yerleştirir. Android Developers, 2024'e göre zIndex yalnızca çizim sırasını etkiler, dokunma olayı işlemeyi etkilemez.

zIndex özellikle animasyonlarda ve sürüklenebilir bileşenlerde kullanışlıdır; burada bir öğenin geçici olarak diğerlerinin üzerine çıkması gerekir. Örneğin, bir kart sürüklenirken zIndex'i artar, böylece komşu öğeler tarafından örtülmez.

@Composable
fun ZIndexExample() {
    Box(modifier = Modifier.size(150.dp)) {
        Box(modifier = Modifier.size(80.dp)
            .align(Alignment.TopStart)
            .zIndex(2.0f)
            .background(Color.Green))
        Box(modifier = Modifier.size(100.dp)
            .align(Alignment.Center)
            .zIndex(1.0f)
            .background(Color.Blue))
    }
}

Box Kullanımına Pratik Örnekler

Box, görüntülerin üzerine metin yerleştirmek için yaygın olarak kullanılır. Arka plan görüntüsü önce yerleştirilir, ardından arka plan üzerinde konumlandırmak için Modifier.align ile metin yerleştirilir.

@Composable
fun ImageWithOverlay() {
    Box(modifier = Modifier.fillMaxWidth().height(200.dp)) {
        Image(
            painter = painterResource(R.drawable.photo),
            contentDescription = "Photo",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        Box(
            modifier = Modifier.fillMaxSize()
                .background(Color.Black.copy(alpha = 0.4f))
        )
        Text(
            text = "Başlık",
            color = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
                .padding(16.dp)
        )
    }
}

İkinci örnek, bir yükleme göstergesi oluşturmak için Box'tır. Box tüm ekran alanını kaplar ve CircularProgressIndicator contentAlignment aracılığıyla ortalanır.

@Composable
fun LoadingOverlay() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator(
            modifier = Modifier.size(48.dp)
        )
    }
}

Box Boyut Kısıtlamaları

Box varsayılan olarak içeriğinin boyutuna göre ayarlanır. Alt öğelerin farklı boyutları varsa Box en büyük öğenin boyutunu alır. Alt öğe olmadığında Box minimum boyuta küçülür.

Modifier.clipToBounds, alt öğelerin görüntülenmesini Box sınırlarıyla kısıtlar. Bu değiştirici olmadan alt öğeler Box'ın dışına taşabilir. Material Design Guidelines, 2025'e göre, Box içinde Modifier.scale veya Modifier.graphicsLayer kullanırken clipToBounds zorunludur.

propagateMinConstraints, minimum boyut kısıtlamalarını alt öğelere ileten bir Box parametresidir. true olarak ayarlandığında, alt öğeler Modifier.size veya Modifier.constrain aracılığıyla Box için belirlenen minimum boyuttan daha küçük olamaz.

• Box — hiçbir boyut ayarlanmamışsa ve fillMaxSize'a sahip alt öğe yoksa minimum kapsayıcı
• Modifier.clipToBounds içeriğin Box sınırlarının dışına taşmasını önler
• propagateMinConstraints minimum kısıtlamaları alt öğelere iletir