Jetpack Compose में Row: यह क्या है, composable गुण और यह कैसे काम करता है

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

Row एक composable फ़ंक्शन है जो चाइल्ड तत्वों को एक क्षैतिज अनुक्रम में रखता है। Compose लेआउट पदानुक्रम में, Row Column और Box के साथ एक बुनियादी कंटेनर की स्थिति रखता है।

Row को आयाम निर्दिष्ट करने की आवश्यकता नहीं है — यह स्वचालित रूप से अपनी सामग्री के अनुसार समायोजित हो जाता है। Row की चौड़ाई Modifier.fillMaxWidth या एक निश्चित आकार निर्दिष्ट न होने तक पैडिंग सहित चाइल्ड तत्वों की चौड़ाई के योग के बराबर होती है।

Row के चाइल्ड तत्वों के अपने स्वयं के मॉडिफायर हो सकते हैं जो कंटेनर के भीतर उनकी स्थिति को प्रभावित करते हैं। उदाहरण के लिए, Modifier.weight तत्वों को उपलब्ध स्थान का एक आनुपातिक भाग लेने की अनुमति देता है।

Android Developers Blog, 2024 के अनुसार, Row चाइल्ड तत्वों को क्रमिक रूप से संसाधित करता है, Compose माप नियमों के आधार पर उनके आकार की गणना करता है: पहले बिना weight वाले तत्वों को मापा जाता है, फिर शेष स्थान weight वाले तत्वों के बीच वितरित किया जाता है।

Row सिंटैक्स और मूल हस्ताक्षर

Row के मूल हस्ताक्षर में modifier पैरामीटर, horizontalArrangement और verticalAlignment शामिल हैं। सभी चाइल्ड तत्व अंतिम कंटेंट लैम्ब्डा ब्लॉक में पास किए जाते हैं।

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "एक")
        Text(text = "दो")
        Text(text = "तीन")
    }
}

Row के गुण: horizontalArrangement और verticalAlignment

horizontalArrangement पैरामीटर यह निर्धारित करता है कि Row के भीतर क्षैतिज अक्ष के साथ चाइल्ड तत्व कैसे वितरित किए जाते हैं। Arrangement वर्ग से Start, End, Center, SpaceBetween, SpaceAround और SpaceEvenly उपलब्ध मान हैं।

Arrangement.Start तत्वों को कंटेनर की शुरुआत में रखता है, Arrangement.End — अंत में, और Arrangement.Center — केंद्र में। ये मान CSS Flexbox में justify-content प्रॉपर्टी के समान काम करते हैं।

Arrangement.SpaceBetween तत्वों को समान रूप से वितरित करता है, पहले तत्व को शुरुआत में, अंतिम को अंत में और बाकी को उनके बीच समान अंतराल के साथ रखता है। Material Design Guidelines, 2025 के अनुसार, SpaceBetween टूलबार और नेविगेशन पंक्तियों के लिए इष्टतम है।

verticalAlignment पैरामीटर तत्वों को लंबवत रूप से संरेखित करता है। Alignment.Top, Alignment.CenterVertically और Alignment.Bottom उपलब्ध मान हैं। यह गुण तब उपयोगी होता है जब Row तत्वों की ऊंचाई अलग-अलग होती है — उदाहरण के लिए, बहु-पंक्ति टेक्स्ट के बगल में एक आइकन।

Arrangement मानों की तालिका

Modifier.weight के साथ स्थान वितरण

Modifier.weight एक मॉडिफायर है जो केवल Row और Column के अंदर उपलब्ध है जो निर्दिष्ट मान के अनुपात में चाइल्ड तत्वों के बीच उपलब्ध स्थान वितरित करता है। यदि एक तत्व का वजन 1.0f है और दूसरे का 2.0f है, तो दूसरा तत्व दोगुना स्थान लेगा।

बिना weight वाले तत्व अपनी सामग्री के लिए आवश्यक स्थान लेते हैं। शेष स्थान weight वाले तत्वों के बीच उनके वजन के अनुपात में वितरित किया जाता है। यह व्यवहार CSS Flexbox में flex-grow प्रॉपर्टी के समान है।

Android Developer Documentation, 2025 के अनुसार, weight केवल Row, Column और BoxWithConstraints के अंदर काम करता है। Row में weight का उपयोग करते समय, सभी चाइल्ड तत्वों को दो पासों में मापा जाता है: पहले बिना weight वाले तत्व, फिर weight वाले तत्व।

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "बाएं",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "दाएं")
    }
}

Row के साथ कोड उदाहरण

पहला उदाहरण एक आइकन और टेक्स्ट के साथ Row प्रदर्शित करता है — संपर्क सूची या सेटिंग्स के लिए एक विशिष्ट परिदृश्य। Icon और Text को केंद्र में verticalAlignment के साथ Row में लपेटा गया है।

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "पसंदीदा में जोड़ें")
    }
}

दूसरा उदाहरण बटन और समान वितरण के साथ Row दिखाता है। SpaceEvenly सभी बटनों और कंटेनर के किनारों के बीच समान अंतराल की गारंटी देता है।

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("रद्द करें") }
        Button(onClick = {}) { Text("सहेजें") }
    }
}

तीसरा उदाहरण — रेटिंग प्रदर्शित करने के लिए Card के अंदर Row। Modifier.weight के साथ एक नेस्टेड Row रेटिंग स्टार और संख्यात्मक मान को निश्चित स्थान लेने की अनुमति देता है।

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "रेटिंग:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

अनुकूली लेआउट में Row की विशेषताएं

Row को अनुकूली लेआउट में चौड़ाई नियंत्रण की आवश्यकता होती है। यदि Row की सामग्री उपलब्ध स्क्रीन चौड़ाई से अधिक हो जाती है, तो तत्व कंटेनर की सीमाओं से बाहर निकल सकते हैं। इसे रोकने के लिए, Modifier.horizontalScroll का उपयोग करें या Column पर स्विच करें।

Row को Modifier.weight के साथ संयोजित करते समय, पैरेंट Row के लिए fillMaxWidth सेट करना महत्वपूर्ण है — अन्यथा weight अस्तित्वहीन स्थान वितरित करेगा। Material Design Guidelines, 2025 के अनुसार, fillMaxWidth के बिना weight वाला Row एक अमान्य कॉन्फ़िगरेशन माना जाता है।

अनुकूली इंटरफ़ेस के लिए, Row को Box के साथ संयोजित करने या विभिन्न स्क्रीन आकारों में स्वचालित तत्व वितरण के लिए Arrangement.SpaceBetween का उपयोग करने की अनुशंसा की जाती है। यह मीडिया क्वेरी के बिना लचीलापन प्रदान करता है।

• Modifier.horizontalScroll — Row के ओवरफ़्लो होने पर स्क्रॉलिंग जोड़ता है
• Modifier.weight — स्थान को आनुपातिक रूप से वितरित करता है
• Arrangement.SpaceBetween — किनारों पर फिक्सिंग के साथ अनुकूली वितरण