Jetpack Compose Academy · पाठ

Layout Composable लिखना

children को मापिए और उन्हें manually position कीजिए।

पाठ 2, कुल 4 में से13 चरण

Layout Composable लिखना, CoddyKit पर Jetpack Compose Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Jetpack Compose Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

लेआउट कंपोज़ेबल से परिचित हों

अपनी व्यवस्था बनाने के लिए आप लेआउट कंपोज़ेबल का उपयोग करते हैं। यह आपको सीधे मापने और रखने की मूल शक्ति देता है। 🛠️

लेआउट को सामग्री और लैम्ब्डा मिलते हैं

लेआउट आपकी चाइल्ड सामग्री और एक मापने वाला लैम्ब्डा स्वीकार करता है। लैम्ब्डा को मापने योग्य ऑब्जेक्ट और काम करने के लिए सीमाएँ मिलती हैं।

Layout(content = content,
  modifier = modifier) { measurables, constraints ->
  // measure and place
}

चरण एक: चाइल्ड को मापें

लैम्ब्डा के अंदर मापने योग्य ऑब्जेक्ट पर क्रम से काम करें और हर एक को मापें। आपको ज्ञात आकारों वाली रखने योग्य ऑब्जेक्टों की सूची मिलती है।

val placeables = measurables.map { it.measure(constraints) }

चरण दो: अपना आकार तय करें

अब गणना करें कि आपका लेआउट कितना बड़ा होना चाहिए। ऊर्ध्वाधर स्टैक के लिए ऊँचाई चाइल्ड की ऊँचाइयों का योग और चौड़ाई सबसे चौड़े चाइल्ड के बराबर होती है।

val height = placeables.sumOf { it.height }
val width = placeables.maxOf { it.width }

चरण तीन: layout() से आकार बताएँ

अपना आकार घोषित करने के लिए layout(width, height) कॉल करें। पिछला लैम्ब्डा वह स्थान है जहाँ आप वास्तव में हर चाइल्ड की स्थिति तय करते हैं।

layout(width, height) {
  // placement goes here
}

चरण चार: हर चाइल्ड को रखें

चल रहे y ऑफ़सेट को सँभालें और हर रखने योग्य ऑब्जेक्ट को पिछले वाले के नीचे रखें। हर placeRelative कॉल के बाद उसकी ऊँचाई ऑफ़सेट में जोड़ें।

var y = 0
placeables.forEach {
  it.placeRelative(0, y)
  y += it.height
}

आपने अभी Column को फिर से बनाया है

चाइल्ड को ऊपर से नीचे रखना ठीक वही है जो Column करता है। आपने अब शुरू से ऐसा लेआउट लिखा है जो उसी की तरह व्यवहार करता है। 🎉

इसे पुनः उपयोग योग्य फ़ंक्शन में रखें

अपने Layout कॉल को एक @Composable फ़ंक्शन के अंदर रखें, ताकि दूसरे लोग इसे किसी अंतर्निर्मित फ़ंक्शन की तरह उपयोग कर सकें। एक मॉडिफ़ायर और सामग्री स्लॉट उपलब्ध कराएँ।

@Composable
fun MyColumn(modifier: Modifier = Modifier,
  content: @Composable () -> Unit) { }

Modifier को आगे भेजें

मिलने वाले मॉडिफ़ायर को Layout कॉल तक आगे भेजें। इससे कॉल करने वाले वास्तविक लेआउट की तरह पैडिंग, आकार और पृष्ठभूमि जोड़ सकते हैं।

Modifier पैरामीटर का डिफ़ॉल्ट मान दें

मॉडिफ़ायर का डिफ़ॉल्ट मान Modifier रखें। जिन्हें अतिरिक्त सज्जा की आवश्यकता नहीं है, वे इसे छोड़ सकते हैं और आपका एपीआई साफ़ तथा उपयोगी बना रहता है।

अब आप किसी भी चीज़ को अनुकूलित कर सकते हैं

स्थिति की गणना बदलने पर आपको विकर्ण स्टैक, बीच में रखी पंक्तियाँ या ग्रिड मिल सकते हैं। व्यवस्था के लिए लेआउट कंपोज़ेबल आपका खाली कैनवास है।

त्वरित जाँच

मापे गए चाइल्ड को स्क्रीन पर वास्तव में कौन-सी विधि रखती है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: लेआउट कंपोज़ेबल लिखना

Layout के अंदर आप चाइल्ड को मापकर रखने योग्य ऑब्जेक्ट बनाते हैं, अपना आकार तय करने के लिए layout() कॉल करते हैं, फिर हर चाइल्ड पर placeRelative कॉल करते हैं। पुनः उपयोग के लिए इसे फ़ंक्शन में रखें। ✅

शुरुआत निःशुल्क

एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Layout Composable लिखना” पाठ निःशुल्क है?

हाँ—“Layout Composable लिखना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Jetpack Compose Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Layout Composable लिखना” में मैं क्या सीखूँगा?

children को मापिए और उन्हें manually position कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Jetpack Compose Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Jetpack Compose Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Jetpack Compose Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“Layout Composable लिखना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Jetpack Compose Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Jetpack Compose Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Jetpack Compose Academy पर वापस जाएँ