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

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

ग्रिड तय करना

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

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

किसी ग्रिड में आइटम प्लेस करना

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()
}

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

कॉलम के हिसाब से भरने के लिए, इस डिफ़ॉल्ट तरीके को बदलने के लिए, 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()
}

फ़्लो फ़ंक्शन, आइटम को रखने की दिशा बदलता है.
दूसरी इमेज. GridFlow.Row (बाईं ओर) और GridFlow.Column (दाईं ओर).

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

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

  • फ़िक्स्ड (Dp): कोई खास साइज़ तय करना. जैसे, column(180.dp).
  • प्रतिशत (Float): उपलब्ध कुल जगह का प्रतिशत तय करना. जैसे, 50% के लिए 0.0f से 1.0f (जैसे, 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")

}

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

फ़्लेक्सिबल ग्रिड ट्रैक के लिए, कम से कम साइज़ सेट करना

जब किसी ग्रिड कंटेनर में कोई जगह नहीं बचती है, तो स्टैंडर्ड फ़्लेक्सिबल ट्रैक 0.dp तक सिकुड़ सकता है. ऐसा होने से रोकने और यह पक्का करने के लिए कि कॉन्टेंट न दबे, कम से कम साइज़ तय करने के लिए GridTrackSize.MinMax का इस्तेमाल करें. इससे ट्रैक को फ़्लेक्सिबल रखा जा सकता है.

यहां दिए गए उदाहरण में, पहली लाइन के लिए कम से कम 100.dp जगह तय की गई है:

Grid(
    config = {
        column(1f)
        // The first row has a minimum height of 100.dp and can expand to 
        // the half of the remaining space.
        row(GridTrackSize.MinMax(100.dp, 1.fr))
        // The second row takes the half of the remaining space.
        row(1.fr)
        // The third row has a fixed height of 200.dp.
        row(200.dp)
    },
    modifier = Modifier.size(360.dp) // Total grid height is 360.dp
) {
    PastelRedCard("MinMax(100.dp, 1.fr)")
        PastelGreenCard("Flex(1.fr)")
    PastelBlueCard("Fixed(200.dp)")
}

ट्रैक की साइज़िंग के चार मुख्य विकल्पों का इस्तेमाल करके तय की गई लाइन की ऊंचाई.
चौथी इमेज. पहली लाइन की ऊंचाई कम से कम 100.dp है.

लेज़ी लिस्ट प्लेस करने के लिए, कम से कम ग्रिड ट्रैक साइज़ सेट करना

स्टैंडर्ड फ़्लेक्सिबल ट्रैक, बेस साइज़ तय करने के लिए, अपने चाइल्ड के इंट्रिंसिक साइज़ के बारे में अपने-आप क्वेरी करते हैं. हालांकि, Jetpack Compose, SubcomposeLayout के इंट्रिंसिक साइज़ के बारे में क्वेरी करने की अनुमति नहीं देता. यह LazyColumn और LazyRow जैसे कॉम्पोनेंट को बैकअप करता है.

किसी स्टैंडर्ड फ़्लेक्सिबल ट्रैक में लेज़ी लिस्ट प्लेस करने पर, IllegalStateException क्रैश हो जाता है. फ़्लेक्सिबल ग्रिड ट्रैक में लेज़ी लिस्ट को सुरक्षित तरीके से प्लेस करने के लिए, इंट्रिंसिक मेज़रमेंट पास को बायपास करने के लिए, MinMax का इस्तेमाल करें. इसके लिए, कम से कम साइज़ तय करें. जैसे, 0.dp.

Grid(
    config = {
        column(1f)
        // The first row's height is determined by the height of the Text composable.
        row(GridTrackSize.Auto)
        // The second row occupies the remaining space, allowing the LazyColumn to scroll.
        row(GridTrackSize.MinMax(0.dp, 1.fr))

        gap(8.dp)
    },
    modifier = Modifier.size(width = 170.dp, height = 240.dp)
) {
    Text("Lazy column in a Grid")
    // The LazyColumn is placed in the second row, filling the remaining space.
    LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp)) {
        items(100) { number ->
            PastelGreenCard("Card $number")
        }
    }
}

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

इंट्रिंसिक तरीके से ग्रिड ट्रैक का साइज़ तय करना

जब आपको लेआउट को किसी फ़िक्स्ड कंटेनर में फ़िट करने के बजाय, कॉन्टेंट के हिसाब से अडजस्ट करना हो, तब इंट्रिंसिक साइज़िंग का इस्तेमाल 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.")
}

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

लाइनों और कॉलम के बीच गैप सेट करना

ग्रिड ट्रैक का साइज़ तय करने के बाद, ट्रैक के बीच की दूरी को बेहतर बनाने के लिए, ग्रिड गैप में बदलाव किया जा सकता है. आप 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()
}

पंक्तियों और कॉलम के बीच का अंतर.
छठी इमेज. लाइनों और कॉलम के बीच गैप.

एक ही कॉलम और लाइन साइज़ के गैप तय करने के लिए, gap `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()
}

पीछे जाएं
शुरू करना
आगे बढ़ें
आइटम प्रॉपर्टी सेट करना