Jetpack Compose میں Box: یہ کیا ہے، composable خصوصیات اور یہ کیسے کام کرتا ہے

Jetpack Compose میں Box کیا ہے؟

Box ایک composable فنکشن ہے جو چائلڈ عناصر کو ایک ہی علاقے میں رکھتا ہے، انہیں ایک دوسرے کے اوپر ڈھیر کرتا ہے۔ پہلا چائلڈ عنصر نیچے کھینچا جاتا ہے، آخری اوپر۔ ڈیفالٹ طور پر، Box سب سے بڑے چائلڈ عنصر کے سائز میں ڈھل جاتا ہے۔

Row اور Column کے برعکس، Box عناصر کو ترتیب وار ترتیب نہیں دیتا — تمام چائلڈ عناصر ایک ہی علاقہ گھیرتے ہیں اور ایک دوسرے کو اوورلیپ کر سکتے ہیں۔ یہ Box کو انٹرفیس کی تہیں بنانے کے لیے ناگزیر بناتا ہے۔

Box کا سائز اس اصول سے متعین ہوتا ہے: اگر کسی چائلڈ عنصر کا مقررہ سائز نہیں ہے، تو Box کم سے کم سائز میں سکڑ جاتا ہے۔ اگر کم از کم ایک چائلڈ عنصر میں Modifier.fillMaxSize ہے، تو Box زیادہ سے زیادہ تک پھیل جاتا ہے۔

Android Developers Blog, 2024 کے مطابق، Box ان معاملات کے لیے Compose میں سب سے موثر کنٹینر ہے جہاں عناصر کو ترتیب وار ترتیب کی ضرورت نہیں ہوتی۔ Box Row اور Column کے برعکس، پوزیشننگ کے لیے اضافی پیمائش نہیں کرتا۔

Box کا بنیادی دستخط

Box پیرامیٹر modifier، contentAlignment اور propagateMinConstraints قبول کرتا ہے۔ تمام چائلڈ عناصر content بلاک میں منتقل کیے جاتے ہیں، جہاں ہر ایک کے اپنے موڈیفائر ہو سکتے ہیں۔

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

Box میں ContentAlignment اور Modifier.align

contentAlignment Box کا ایک پیرامیٹر ہے جو تمام چائلڈ عناصر کے لیے ڈیفالٹ سیدھ متعین کرتا ہے۔ اگر متعین نہ کیا جائے، تو Alignment.TopStart استعمال ہوتا ہے — عناصر کنٹینر کے اوپری بائیں کونے میں رکھے جاتے ہیں۔

Modifier.align contentAlignment سے آزادانہ طور پر کسی مخصوص چائلڈ عنصر کی سیدھ کو اوور رائڈ کرنے کی اجازت دیتا ہے۔ مثال کے طور پر، Alignment.Center والا Box Modifier.align(Alignment.BottomEnd) والا عنصر رکھ سکتا ہے جو نیچے دائیں کونے میں جم جائے گا۔

Material Design Guidelines, 2025 کے مطابق، Modifier.align پس منظر کی تصاویر پر بیجز اور آئیکن رکھنے کے لیے مفید ہے۔ یہ Box کے تمام مواد کے لیے عمومی سیدھ متعین کرنے اور انفرادی عناصر کے لیے اسے اوور رائڈ کرنے کی اجازت دیتا ہے۔

Alignment اقدار کا جدول

Modifier.align کے ساتھ مثال

اس مثال میں، Box میں ایک پس منظر کی تصویر اور نیچے دائیں کونے میں ایک بیج ہے۔ Modifier.align(BottomEnd) بیج کو Box کے contentAlignment سے آزادانہ طور پر رکھتا ہے۔

@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 کے ساتھ پرت کا انتظام

Modifier.zIndex Box کے اندر عناصر کی کھینچنے کی ترتیب کو کنٹرول کرتا ہے۔ ڈیفالٹ طور پر، عناصر اعلان کی ترتیب میں کھینچے جاتے ہیں — پہلا عنصر نیچے، آخری اوپر۔ zIndex اس ترتیب کو اوور رائڈ کرتا ہے۔

zIndex 2.0f والا عنصر zIndex 1.0f والے عنصر کے اوپر کھینچا جاتا ہے، کوڈ میں ان کی ترتیب سے آزاد۔ منفی zIndex اقدار عنصر کو دوسروں کے نیچے رکھتی ہیں۔ Android Developers, 2024 کے مطابق، zIndex صرف کھینچنے کی ترتیب کو متاثر کرتا ہے، ٹچ ایونٹ ہینڈلنگ کو نہیں۔

zIndex خاص طور پر اینیمیشنز اور گھسیٹنے والے اجزاء میں مفید ہے، جہاں عنصر کو عارضی طور پر دوسروں کے اوپر اٹھنے کی ضرورت ہوتی ہے۔ مثال کے طور پر، کارڈ گھسیٹتے وقت، اس کا zIndex بڑھ جاتا ہے تاکہ پڑوسی عناصر اسے ڈھانپ نہ سکیں۔

@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 استعمال کرنے کی عملی مثالیں

Box تصاویر پر متن چڑھانے کے لیے بڑے پیمانے پر استعمال ہوتا ہے۔ پس منظر کی تصویر پہلے رکھی جاتی ہے، پھر پس منظر پر پوزیشننگ کے لیے Modifier.align کے ساتھ متن رکھا جاتا ہے۔

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

دوسری مثال لوڈنگ انڈیکیٹر بنانے کے لیے Box ہے۔ Box پوری اسکرین کے علاقے کو گھیرتا ہے، اور CircularProgressIndicator contentAlignment کے ذریعے مرکز میں ہوتا ہے۔

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

Box کے سائز کی پابندیاں

Box ڈیفالٹ طور پر اپنے مواد کے سائز میں ڈھل جاتا ہے۔ اگر چائلڈ عناصر کے مختلف سائز ہوں، تو Box سب سے بڑے عنصر کا سائز لیتا ہے۔ جب کوئی چائلڈ عنصر نہ ہو، تو Box کم سے کم سائز میں سکڑ جاتا ہے۔

Modifier.clipToBounds چائلڈ عناصر کی رینڈرنگ کو Box کی حدود تک محدود کرتا ہے۔ اس موڈیفائر کے بغیر، چائلڈ عناصر Box سے باہر پھیل سکتے ہیں۔ Material Design Guidelines, 2025 کے مطابق، Box کے اندر Modifier.scale یا Modifier.graphicsLayer استعمال کرتے وقت clipToBounds لازمی ہے۔

propagateMinConstraints Box کا ایک پیرامیٹر ہے جو کم سے کم سائز کی پابندیوں کو چائلڈ عناصر تک پہنچاتا ہے۔ اگر true پر سیٹ کیا جائے، تو چائلڈ عناصر Modifier.size یا Modifier.constrain کے ذریعے Box کے لیے مقرر کردہ کم سے کم سائز سے چھوٹے نہیں ہو سکتے۔

• Box — کم سے کم کنٹینر اگر کوئی سائز مقرر نہ ہو اور fillMaxSize والا کوئی چائلڈ عنصر نہ ہو
• Modifier.clipToBounds مواد کو Box کی حدود سے باہر نکلنے سے روکتا ہے
• propagateMinConstraints کم سے کم پابندیاں چائلڈ عناصر تک پہنچاتا ہے