Jetpack Compose-da Box: nima, composable xususiyatlari va qanday ishlaydi

Jetpack Compose-da Box nima

Box — bola elementlarni bir maydonda joylashtiruvchi, ularni bir-birining ustiga qo'yuvchi composable funksiyadir. Birinchi bola element pastda, oxirgisi — tepada chiziladi. Odatiy bo'lib Box eng katta bola elementning o'lchamiga moslashadi.

Row va Column-dan farqli o'laroq, Box elementlarni ketma-ket joylashtirmaydi — barcha bola elementlar bir maydonni egallaydi va bir-birini yopishi mumkin. Bu Box-ni interfeys qatlamlari kompozitsiyasi uchun ajralmas qiladi.

Box o'lchami qoida bo'yicha aniqlanadi: agar hech bir bola elementning qat'iy o'lchami bo'lmasa, Box minimal o'lchamga qadar yig'iladi. Agar kamida bitta bola elementda Modifier.fillMaxSize bo'lsa, Box maksimal o'lchamga qadar kengayadi.

Android Developers Blog, 2024-ga ko'ra, Box elementlar ketma-ket joylashishni talab qilmaydigan hollarda Compose-dagi eng samarali konteynerdir. Row va Column-dan farqli o'laroq, Box joylashish uchun qo'shimcha o'lchovlarni amalga oshirmaydi.

Box-ning asosiy imzosi

Box modifier, contentAlignment va propagateMinConstraints parametrlarini qabul qiladi. Barcha bola elementlar content blokida uzatiladi, bu erda har biri o'z modifierlariga ega bo'lishi mumkin.

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

Box-da ContentAlignment va Modifier.align

contentAlignment — Box-ning barcha bola elementlar uchun standart tekislanishni belgilaydigan parametridir. Ko'rsatilmagan bo'lsa, Alignment.TopStart ishlatiladi — elementlar konteynerning yuqori chap burchagida joylashtiriladi.

Modifier.align contentAlignment-dan qat'iy nazar ma'lum bir bola elementning tekislanishini o'zgartirishga imkon beradi. Masalan, Alignment.Center bilan Box-da Modifier.align(Alignment.BottomEnd) bo'lgan element pastki o'ng burchakka suriladi.

Material Design Guidelines, 2025-ga ko'ra, Modifier.align nishonlar va belgilarni fon tasvirlari ustida joylashtirish uchun foydalidir. Bu Box-ning barcha tarkibi uchun umumiy tekislanishni o'rnatish va uni alohida elementlar uchun o'zgartirish imkonini beradi.

Alignment qiymatlari jadvali

Modifier.align bilan misol

Ushbu misolda Box fon tasviri va pastki o'ng burchakda nishonni o'z ichiga oladi. Modifier.align(BottomEnd) nishonni butun Box-ning contentAlignment-dan mustaqil ravishda joylashtiradi.

@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 bilan qatlamlarni boshqarish

Modifier.zIndex Box ichidagi elementlarni chizish tartibini boshqaradi. Odatiy bo'lib elementlar e'lon qilish tartibida chiziladi — birinchi element pastda, oxirgisi tepada. zIndex bu tartibni o'zgartiradi.

zIndex qiymati 2.0f bo'lgan element, koddagi tartibidan qat'iy nazar, zIndex 1.0f bo'lgan elementning ustida chiziladi. Salbiy zIndex qiymatlari elementni boshqalardan pastga tushiradi. Android Developers, 2024-ga ko'ra, zIndex faqat chizish tartibiga ta'sir qiladi, teginish hodisalarini qayta ishlashga ta'sir qilmaydi.

zIndex ayniqsa animatsiyalar va draggable komponentlarda foydali, bu erda element vaqtincha boshqalarning ustiga ko'tarilishi kerak. Masalan, kartani sudrab olib borishda uning zIndex qiymati oshiriladi, shunda u qo'shni elementlar tomonidan yopilmaydi.

@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 foydalanishning amaliy misollari

Box matnni tasvir ustiga qo'yish uchun keng qo'llaniladi. Fon tasviri birinchi joylashtiriladi, so'ngra matn Modifier.align bilan fon ustiga joylashtiriladi.

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

Ikkinchi misol — yuklash ko'rsatkichini yaratish uchun Box. Box butun ekran maydonini egallaydi, CircularProgressIndicator esa contentAlignment orqali markazlashtiriladi.

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

Box o'lcham cheklovlari

Box odatiy bo'lib tarkibning o'lchamiga moslashadi. Bola elementlar turli o'lchamlarga ega bo'lsa, Box eng katta elementning o'lchamini qabul qiladi. Bola elementlar bo'lmaganda, Box minimal o'lchamga qadar yig'iladi.

Modifier.clipToBounds bola elementlarning chizilishini Box chegaralari bilan cheklaydi. Ushbu modifiersiz bola elementlar Box-dan chiqib ketishi mumkin. Material Design Guidelines, 2025-ga ko'ra, Box ichida Modifier.scale yoki Modifier.graphicsLayer ishlatilganda clipToBounds majburiydir.

propagateMinConstraints — bola elementlarga minimal o'lcham cheklovlarini uzatuvchi Box parametridir. true qilib belgilansa, bola elementlar Box-ning minimal o'lchamidan kichik bo'la olmaydi. Bu xatti-harakat qat'iy minimal o'lchamlarga ega maxsus konteynerlarni yaratishda muhimdir.

• Box — o'lchamlar ko'rsatilmagan va fillMaxSize bilan bola elementlar bo'lmasa, minimal konteyner
• Modifier.clipToBounds tarkibning Box chegaralaridan chiqib ketishini oldini oladi
• propagateMinConstraints bola elementlarga minimal cheklovlarni uzatadi