कंटेनर प्रॉपर्टी सेट करना

अलग-अलग स्क्रीन साइज़ और कॉन्टेंट टाइप के हिसाब से अडजस्ट होने वाले लेआउट बनाने के लिए, ग्रिड कंटेनर कॉन्फ़िगरेशन तय किया जा सकता है. इस पेज पर, इन कामों को करने का तरीका बताया गया है:

ग्रिड तय करना: पंक्तियों और कॉलम का बुनियादी स्ट्रक्चर सेट अप करें.
आइटम को ग्रिड में रखना: जानें कि आइटम को ग्रिड सेल में कैसे रखा जाता है और फ़्लो की दिशा कैसे बदली जाती है.
ट्रैक के साइज़ मैनेज करना: ट्रैक के साइज़ सेट करने के लिए, फ़िक्स्ड, प्रतिशत, फ़्लेक्सिबल, और इंट्रिंसिक साइज़िंग का इस्तेमाल करें.
गैप सेट करना: पंक्तियों और कॉलम के बीच के "गटर" मैनेज करें.

ग्रिड तय करना

ग्रिड में कॉलम और लाइनें होती हैं. Grid कंपोज़ेबल में config पैरामीटर होता है. यह GridConfigurationScope में कॉलम और पंक्तियों को तय करने के लिए, लैंबडा फ़ंक्शन को स्वीकार करता है. इस उदाहरण में, तीन लाइनों और दो कॉलम वाली एक ग्रिड को तय किया गया है. हर लाइन और कॉलम का साइज़ तय है, जिसे Dp में बताया गया है:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}DefineGrid.kt

आइटम को ग्रिड में रखना

Grid, content लैंबडा में मौजूद यूज़र इंटरफ़ेस (यूआई) एलिमेंट लेता है और उन्हें ग्रिड सेल में रखता है. ग्रिड, आइटम को लेआउट करता है. इससे कोई फ़र्क़ नहीं पड़ता कि आपने पंक्तियों और कॉलम को साफ़ तौर पर तय किया है या नहीं. डिफ़ॉल्ट रूप से, Grid, यूज़र इंटरफ़ेस (यूआई) एलिमेंट को लाइन में मौजूद उपलब्ध ग्रिड सेल में रखने की कोशिश करता है. अगर ऐसा नहीं हो पाता है, तो वह उसे अगली लाइन में मौजूद उपलब्ध ग्रिड सेल में रखता है. अगर कोई खाली सेल नहीं है, तो Grid एक नई लाइन बनाता है.

इस उदाहरण में, ग्रिड में छह ग्रिड सेल हैं और हर सेल में एक कार्ड रखा गया है (पहली इमेज). हर ग्रिड सेल 160dp x 90dp है. इसलिए, ग्रिड का कुल साइज़ 320dp x 270dp है.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}DefineGrid.kt

**पहली इमेज**. छह कार्ड, तीन लाइनों और दो कॉलम वाले ग्रिड में रखे गए हैं.

डिफ़ॉल्ट ऐक्शन को कॉलम के हिसाब से भरने के लिए, flow प्रॉपर्टी को GridFlow.Column पर सेट करें.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}GridItem.kt

फ़्लो फ़ंक्शन, आइटम रखने की दिशा बदलता है. — **दूसरी इमेज**. `GridFlow.Row` (बाएं) और `GridFlow.Column` (दाएं) के तौर पर दिखाया गया है.

ट्रैक के साइज़ को मैनेज करना

लाइनों और कॉलम को मिलाकर ग्रिड ट्रैक बनता है. इनमें से किसी एक तरीके का इस्तेमाल करके, ग्रिड ट्रैक का साइज़ तय किया जा सकता है:

तय किया गया साइज़ (Dp): इसमें एक तय साइज़ (जैसे, column(180.dp)) तय किया जाता है.
प्रतिशत (Float): यह 0.0f से 1.0f तक के कुल उपलब्ध स्पेस का प्रतिशत तय करता है. उदाहरण के लिए, 50% के लिए row(0.5f).
फ़्लेक्सिबल (Fr): फ़िक्स्ड और प्रतिशत ट्रैक का हिसाब लगाने के बाद, बचे हुए स्पेस को अनुपात के हिसाब से बांटता है. उदाहरण के लिए, अगर दो लाइनों को 1.fr और 3.fr पर सेट किया जाता है, तो बाद वाली लाइन को बची हुई ऊंचाई का 75% हिस्सा मिलता है.
इंट्रिंसिक: यह विकल्प, ट्रैक का साइज़ उसके अंदर मौजूद कॉन्टेंट के हिसाब से तय करता है. ज़्यादा जानकारी के लिए, ग्रिड ट्रैक के साइज़ का पता लगाना लेख पढ़ें.

इस उदाहरण में, ट्रैक की साइज़िंग के अलग-अलग विकल्पों का इस्तेमाल करके, लाइन की ऊंचाई तय की गई है:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")GridTrackSize.kt

**तीसरी इमेज**. `Grid` में, ट्रैक की साइज़िंग के चार मुख्य विकल्पों का इस्तेमाल करके तय की गई लाइन की ऊंचाई.

ग्रिड ट्रैक के साइज़ को स्वाभाविक रूप से तय करना

अगर आपको लेआउट को कॉन्टेंट के हिसाब से अडजस्ट करना है, तो Grid के लिए इंट्रिंसिक साइज़िंग का इस्तेमाल करें. इससे कॉन्टेंट को किसी तय कंटेनर में फ़िट करने के लिए मजबूर नहीं किया जाएगा. ग्रिड ट्रैक का साइज़ तय करने के लिए, इन वैल्यू का इस्तेमाल किया जाता है:

GridTrackSize.MaxContent: कॉन्टेंट के सबसे बड़े इंट्रिंसिक साइज़ का इस्तेमाल करें.उदाहरण के लिए, चौड़ाई का फ़ैसला टेक्स्ट ब्लॉक में मौजूद टेक्स्ट की पूरी लंबाई से तय होता है. इसमें टेक्स्ट रैप नहीं होता है.
GridTrackSize.MinContent: कॉन्टेंट के कम से कम इंट्रिंसिक साइज़ का इस्तेमाल करें. उदाहरण के लिए, चौड़ाई का पता टेक्स्ट ब्लॉक में मौजूद सबसे लंबे शब्द से चलता है.
GridTrackSize.Auto: ट्रैक के लिए, उपलब्ध जगह के हिसाब से अडजस्ट होने वाले साइज़ का इस्तेमाल करें. डिफ़ॉल्ट रूप से, यह MaxContent की तरह काम करता है. हालांकि, यह पैरंट कंटेनर में फ़िट होने के लिए, अपने कॉन्टेंट को छोटा कर देता है और रैप कर देता है.

इस उदाहरण में, दो टेक्स्ट को अगल-बगल में रखा गया है. पहले टेक्स्ट के लिए कॉलम का साइज़, टेक्स्ट को दिखाने के लिए ज़रूरी कम से कम चौड़ाई के हिसाब से तय किया जाता है. वहीं, दूसरे कॉलम की चौड़ाई, टेक्स्ट की ज़्यादा से ज़्यादा चौड़ाई के हिसाब से तय की जाती है.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}GridTrackSize.kt

**चौथी इमेज**. कॉलम में तय किए गए इंट्रिंसिक साइज़.

लाइनों और कॉलम के बीच का अंतर सेट करना

ग्रिड ट्रैक का साइज़ तय करने के बाद, ट्रैक के बीच की दूरी को बेहतर बनाने के लिए, ग्रिड गैप में बदलाव किया जा सकता है. columnGap फ़ंक्शन की मदद से, कॉलम के बीच का अंतर और rowGap की मदद से, लाइन के बीच का अंतर तय किया जा सकता है. यहां दिए गए उदाहरण में, हर लाइन के बीच 16dp का अंतर है. साथ ही, हर कॉलम के बीच 8dp का अंतर है (पांचवां फ़िगर).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}GridGap.kt

**पांचवीं इमेज**. पंक्तियों और कॉलम के बीच के अंतर.

gap सुविधा का इस्तेमाल करके, एक ही कॉलम और लाइन के साइज़ के बीच के अंतर को तय किया जा सकता है. साथ ही, एक ही फ़ंक्शन का इस्तेमाल करके कॉलम और अंतर के साइज़ को अलग-अलग तय किया जा सकता है. नीचे दिए गए कोड से, ग्रिड में 8dp गैप जोड़े जाते हैं:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}GridGap.kt

पीछे जाएं

शुरू करना

आगे बढ़ें

आइटम प्रॉपर्टी सेट करना