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

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

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

ग्रिड तय करना

ग्रिड में कॉलम और लाइनें होती हैं. 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

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

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

• तय किया गया साइज़ (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)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}
GridTrackSize.kt

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

जब आपको लेआउट को कॉन्टेंट के हिसाब से अडजस्ट करना हो, तब 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