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 न्यूनतम बाधाओं को चाइल्ड एलिमेंट्स तक पहुँचाता है