Jetpack Compose-da Box: nədir, xüsusiyyətləri, composable və necə işləyir

Jetpack Compose-da Box nədir

Box — uşaq elementlərini eyni sahədə yerləşdirən, onları bir-birinin üzərinə qoyan composable funksiyadır. Birinci uşaq element aşağıda, sonuncu isə yuxarıda çəkilir. Standart olaraq Box ən böyük uşaq elementin ölçüsünə uyğunlaşır.

Row və Column-dan fərqli olaraq, Box elementləri ardıcıl yerləşdirmir — bütün uşaq elementlər eyni sahəni tutur və bir-birini örtə bilər. Bu, Box-ı interfeys təbəqələrinin kompozisiyası üçün əvəzolunmaz edir.

Box-un ölçüsü qaydaya əsasən müəyyən edilir: heç bir uşaq elementin sabit ölçüsü yoxdursa, Box minimum ölçüyə qədər yığılır. Ən azı bir uşaq elementdə Modifier.fillMaxSize varsa, Box maksimum ölçüyə qədər genişlənir.

Android Developers Blog, 2024-ə görə, Box, elementlərin ardıcıl yerləşdirilməsi tələb olunmayan hallarda Compose-da ən səmərəli konteynerdir. Row və Column-dan fərqli olaraq, Box yerləşdirmə üçün əlavə ölçmələr aparmır.

Box-un əsas imzası

Box modifier, contentAlignment və propagateMinConstraints parametrlərini qəbul edir. Bütün uşaq elementlər content blokunda ötürülür, burada hər biri öz modifier-lərinə malik ola bilər.

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

Box-da ContentAlignment və Modifier.align

contentAlignment — Box-un bütün uşaq elementlər üçün standart düzülməni təyin edən parametridir. Göstərilməyibsə, Alignment.TopStart istifadə olunur — elementlər konteynerin sol yuxarı küncündə yerləşdirilir.

Modifier.align contentAlignment-dən asılı olmayaraq müəyyən bir uşaq elementin düzülməsini dəyişdirməyə imkan verir. Məsələn, Alignment.Center ilə Box-da Modifier.align(Alignment.BottomEnd) olan element sağ aşağı küncə sıxılacaq.

Material Design Guidelines, 2025-ə görə, Modifier.align nişanların və işarələrin fon şəkilləri üzərində yerləşdirilməsi üçün faydalıdır. Bu, Box-un bütün məzmunu üçün ümumi düzülmə təyin etməyə və onu ayrı-ayrı elementlər üçün dəyişdirməyə imkan verir.

Alignment dəyərləri cədvəli

Modifier.align ilə nümunə

Bu nümunədə Box fon şəkli və sağ aşağı küncdə nişan ehtiva edir. Modifier.align(BottomEnd) nişanı bütün Box-un contentAlignment-dən asılı olmayaraq yerləşdirir.

@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 ilə təbəqələrin idarə edilməsi

Modifier.zIndex Box daxilində elementlərin çəkilmə ardıcıllığını idarə edir. Standart olaraq elementlər bəyannamə sırası ilə çəkilir — birinci element aşağıda, sonuncu yuxarıda. zIndex bu ardıcıllığı dəyişir.

zIndex dəyəri 2.0f olan element, kodda sıralarından asılı olmayaraq, zIndex 1.0f olan elementin üzərində çəkilir. Mənfi zIndex dəyərləri elementi digərlərindən aşağı salır. Android Developers, 2024-ə görə, zIndex yalnız çəkilmə ardıcıllığına təsir edir, toxunma hadisələrinin işlənməsinə təsir etmir.

zIndex xüsusilə animasiyalarda və draggable komponentlərdə faydalıdır, burada element müvəqqəti olaraq digərlərinin üzərinə qalxmalıdır. Məsələn, kartı sürükləyərkən onun zIndex-i artırılır ki, qonşu elementlər tərəfindən örtülməsin.

@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-dan istifadənin praktik nümunələri

Box mətnin şəkil üzərinə qoyulması üçün geniş istifadə olunur. Fon şəkli birinci yerləşdirilir, sonra mətn Modifier.align ilə fonun üzərində yerləşdirilir.

@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ıq",
            color = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
                .padding(16.dp)
        )
    }
}

İkinci nümunə — yükləmə göstəricisi yaratmaq üçün Box. Box bütün ekran sahəsini tutur, CircularProgressIndicator isə contentAlignment vasitəsilə mərkəzləşdirilir.

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

Box-un ölçü məhdudiyyətləri

Box standart olaraq məzmunun ölçüsünə uyğunlaşır. Uşaq elementlər fərqli ölçülərə malikdirsə, Box ən böyük elementin ölçüsünü qəbul edir. Uşaq elementlər olmadıqda Box minimum ölçüyə qədər yığılır.

Modifier.clipToBounds uşaq elementlərin çəkilməsini Box-un sərhədləri ilə məhdudlaşdırır. Bu modifier olmadan uşaq elementlər Box-dan kənara çıxa bilər. Material Design Guidelines, 2025-ə görə, Box daxilində Modifier.scale və ya Modifier.graphicsLayer istifadə edərkən clipToBounds məcburidir.

propagateMinConstraints — uşaq elementlərə minimum ölçü məhdudiyyətlərini ötürən Box parametridir. true olaraq təyin edilərsə, uşaq elementlər Box-un minimum ölçüsündən kiçik ola bilməz. Bu davranış sabit minimum ölçülərə malik xüsusi konteynerlər yaradarkən vacibdir.

• Box — ölçülər göstərilməyibsə və fillMaxSize olan uşaq elementlər yoxdursa, minimum konteyner
• Modifier.clipToBounds məzmunun Box sərhədlərindən kənara çıxmasının qarşısını alır
• propagateMinConstraints uşaq elementlərə minimum məhdudiyyətləri ötürür