Column: Compose में वर्टिकल व्यवस्था और कंटेनर कॉन्फ़िगरेशन

Jetpack Compose में Column क्या है

Column एक Composable फ़ंक्शन है जो वैकल्पिक पैरामीटर लेता है: modifier, verticalArrangement, horizontalAlignment और content — ColumnScope के साथ एक लैम्ब्डा। Column के अंदर, चाइल्ड Composable फ़ंक्शन घोषणा क्रम में ऊपर से नीचे व्यवस्थित होते हैं। Column की ऊँचाई चाइल्ड ऊँचाइयों के योग और Arrangement द्वारा निर्दिष्ट स्थान के बराबर होती है। चौड़ाई Alignment को ध्यान में रखते हुए अधिकतम चाइल्ड चौड़ाई के बराबर होती है।

Column एक अदृश्य कंटेनर है: इसका डिफ़ॉल्ट रूप से कोई पृष्ठभूमि या बॉर्डर नहीं होता। यदि आपको पृष्ठभूमि चाहिए, तो Column पर ही Modifier.background() जोड़ें। LazyColumn के विपरीत, Column सभी चाइल्ड तत्वों को एक साथ रेंडर करता है और वर्चुअलाइज़ेशन का समर्थन नहीं करता। इसका मतलब है कि Column केवल छोटे डेटा सेट के लिए उपयुक्त है — 10-15 तत्वों तक। लंबी सूचियों के लिए, LazyColumn का उपयोग करें।

ColumnScope Column की content लैम्ब्डा के लिए रिसीवर है। यह अतिरिक्त मॉडिफ़ायर प्रदान करता है जो केवल Column के अंदर काम करते हैं: weight(), align(), alignByBaseline()। ये मॉडिफ़ायर Column के बाहर कोई मतलब नहीं रखते क्योंकि वे वर्टिकल लेआउट विशिष्टताओं पर निर्भर करते हैं। उदाहरण के लिए, Modifier.align(Alignment.CenterHorizontally) चाइल्ड तत्व को Column के केंद्र में क्षैतिज रूप से संरेखित करता है।

Column के पैरामीटर: Arrangement, Alignment, Modifier

VerticalArrangement निर्धारित करता है कि तत्वों के बीच वर्टिकल स्थान कैसे वितरित किया जाता है। उपलब्ध मान: Arrangement.Top (डिफ़ॉल्ट), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround। यदि Column की ऊँचाई तत्वों की ऊँचाइयों के योग से अधिक है, तो Arrangement खाली स्थान वितरित करता है। यदि तत्व पूरी ऊँचाई घेरते हैं, तो Arrangement का कोई प्रभाव नहीं होता।

HorizontalAlignment प्रत्येक चाइल्ड तत्व की क्षैतिज संरेखण निर्धारित करता है। Alignment.Start (LTR के लिए डिफ़ॉल्ट), CenterHorizontally, End। Alignment प्रत्येक तत्व पर स्वतंत्र रूप से कार्य करता है: यदि एक तत्व संकीर्ण है और दूसरा चौड़ा है, तो पहला संरेखित होगा, दूसरा Column की सीमाओं से बाहर जा सकता है। Alignment तभी काम करता है जब Column की निश्चित चौड़ाई हो या fillMaxWidth हो।

Column के लिए Modifier: Column एक Modifier स्वीकार करता है जो कंटेनर पर ही लागू होता है। Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — सभी मानक मॉडिफ़ायर काम करते हैं। विशेष नोट: Modifier.height(IntrinsicSize.Min) Column को Intrinsic मापन का उपयोग करके चाइल्ड तत्वों के आधार पर न्यूनतम ऊँचाई की गणना करने के लिए बाध्य करता है।

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("ऊपर", modifier = Modifier.background(Color.Cyan))
        Text("मध्य", modifier = Modifier.background(Color.Magenta))
        Text("नीचे", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column सामग्री के अनुसार ऊँचाई समायोजित करता है
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("छोटा टेक्स्ट")
        Text("एक बहुत लंबा टेक्स्ट जो कॉलम के अंदर लपेटेगा")
    }
}

Column weight: तत्वों के बीच स्थान वितरण

Modifier.weight() एक ColumnScope मॉडिफ़ायर है जो Column तत्वों के बीच खाली वर्टिकल स्थान को निर्दिष्ट वज़न के अनुपात में वितरित करता है। यदि Column 400dp ऊँचाई घेरता है और चाइल्ड तत्व कुल 100dp हैं, तो शेष 300dp वज़न तत्वों के बीच विभाजित होते हैं। weight(2f) वाला तत्व weight(1f) वाले तत्व से दोगुना स्थान प्राप्त करेगा।

fill — weight का दूसरा पैरामीटर: weight(weight: Float, fill: Boolean = true)। यदि fill = true (डिफ़ॉल्ट), तत्व उपलब्ध पूरी ऊँचाई तक फैलता है। यदि fill = false, तत्व केवल अपनी आंतरिक ऊँचाई लेता है, और शेष स्थान खाली रहता है। यह तब उपयोगी होता है जब तत्व एक तरफ चिपका होना चाहिए लेकिन weight केवल खाली स्थान वितरण का अनुपात निर्धारित करता है।

Weight सीमाएँ: weight केवल निश्चित ऊँचाई या fillMaxHeight() वाले Column में काम करता है। यदि Column की ऊँचाई चाइल्ड तत्वों (wrap content) द्वारा निर्धारित होती है, तो वज़न का कोई मतलब नहीं — वितरण के लिए कोई खाली स्थान नहीं है। साथ ही, weight को उसी तत्व पर Modifier.height() के साथ संयोजित नहीं किया जा सकता — वे विरोध करते हैं और weight को अनदेखा किया जाता है।

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // ऊँचाई का 1/6 लेता है (weight 1, योग 1+2+3=6 में से)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // ऊँचाई का 2/6 लेता है
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // ऊँचाई का 3/6 लेता है
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column बनाम LazyColumn: कब क्या उपयोग करें

Column सभी चाइल्ड तत्वों को तुरंत रेंडर करता है। यदि 10-15 से अधिक तत्व हैं, तो Column संरचना और मापन पर महत्वपूर्ण भार डालता है। LazyColumn, इसके विपरीत, केवल दृश्य तत्वों को रेंडर करता है और अदृश्य को पुनः उपयोग करता है। लंबी सूचियों, हजारों तत्वों वाली सूचियों, अनंत सूचियों या चैट के लिए — LazyColumn अनिवार्य है।

Column कब बेहतर है: फ़ॉर्म स्क्रीन (3-10 फ़ील्ड), प्रोफ़ाइल कार्ड, आइकन के साथ वर्टिकल कॉलम, मेनू। Column IntrinsicSize का भी समर्थन करता है, जो अनुकूली ऊँचाई के लिए उपयोगी है। इसके अलावा, Column डीबग करना आसान है — कोई वर्चुअलाइज़ेशन नहीं, सभी तत्व Layout Inspector में दिखाई देते हैं। स्थिर UI के लिए, Column सही विकल्प है।

LazyColumn प्रदान करता है: आइटम कैशिंग, कुंजी-आधारित पहचान, जोड़ने/हटाने का एनिमेशन (animateItemPlacement), स्टिकी हेडर। यदि सूची में विभिन्न प्रकार के तत्व (विभिन्न viewType) हैं, तो items में sealed class के साथ LazyColumn का उपयोग करें। Column स्टिकी हेडर का समर्थन नहीं करता (उन्हें स्क्रॉल करने योग्य Column के माध्यम से अनुकरण करना होता है)। साथ ही, LazyColumn GridCells का उपयोग करते समय LazyVerticalGrid का समर्थन करता है।

Column उपयोग के व्यावहारिक उदाहरण

आइए उपयोगकर्ता प्रोफ़ाइल स्क्रीन देखें जहाँ Column का उपयोग अवतार, नाम, बायो और एक्शन बटन के लिए मुख्य कंटेनर के रूप में किया जाता है। यहाँ, IntrinsicSize.Min वाला Column सामग्री के अनुसार समायोजित होता है, और weight का उपयोग अनुभागों के बीच स्थान वितरित करने के लिए किया जाता है।

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // अवतार
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // नाम
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // बायो
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // एक्शन बटन
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("संदेश") }
                OutlinedButton(onClick = { }) { Text("फ़ॉलो करें") }
            }
        }
    }
}

उदाहरण में, Column तत्वों के बीच समान अंतर के लिए Arrangement.spacedBy(8.dp) का उपयोग करता है। horizontalAlignment = CenterHorizontally अवतार, नाम और बायो को केंद्रित करता है। Column के अंदर Row एक पंक्ति में बटन के लिए नेस्टेड कंटेनर है। Column (वर्टिकल व्यवस्था) और Row (क्षैतिज व्यवस्था) का यह संयोजन Compose में UI निर्माण का एक विशिष्ट पैटर्न है।