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

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

आइटम की जगह सेट करना

row और column पैरामीटर की मदद से, किसी आइटम को किसी ट्रैक या सेल में रखें.

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

शुरुआत से ट्रैक इंडेक्स तय करने के लिए, पॉज़िटिव पूर्णांक का इस्तेमाल करें. उदाहरण के लिए, किसी आइटम को पहली लाइन और कॉलम में रखने के लिए, gridItem(row = 1, column = 1) का इस्तेमाल करें.

आखिर से ट्रैक तय करने के लिए, नेगेटिव पूर्णांक का इस्तेमाल करें. उदाहरण के लिए, किसी आइटम को आखिरी से दूसरी पंक्ति और कॉलम में रखने के लिए, gridItem(row = -2, column = -2) का इस्तेमाल करें.

यहां दिए गए उदाहरण में, कार्ड #2 को दूसरी लाइन और दूसरे कॉलम में रखा गया है. कार्ड #3 को आखिरी लाइन (इंडेक्स -1) में असाइन किया गया है. इसमें वह ट्रैक में उपलब्ध पहले कॉलम में अपने-आप आ जाता है (पहली इमेज).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3(modifier = Modifier.gridItem(row = -1, column = -2))
}
GridItem.kt

पंक्तियों और कॉलम को स्पैन करना

किसी आइटम को एक से ज़्यादा सेल में फैलाने के लिए, rowSpan और columnSpan पैरामीटर का इस्तेमाल करें. यूज़र इंटरफ़ेस (यूआई) एलिमेंट को ग्रिड एरिया में रखा जा सकता है. यह ऐसा एरिया होता है जिसमें कई ग्रिड सेल शामिल होते हैं. gridItem मॉडिफ़ायर की मदद से, rowSpan और columnSpan पैरामीटर का इस्तेमाल करके ग्रिड एरिया तय किया जा सकता है. इस उदाहरण में, कार्ड #1 को दो लाइनों और दो कॉलम वाले एरिया में रखा गया है (आकृति 2).

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    }
) {
    Card1(modifier = Modifier.gridItem(rowSpan = 2, columnSpan = 2))
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

ग्रिड एरिया में अलाइनमेंट सेट करना

gridItem मॉडिफ़ायर के alignment पैरामीटर में वैल्यू सेट करके, ग्रिड एरिया में यूज़र इंटरफ़ेस (यूआई) एलिमेंट का अलाइनमेंट सेट किया जा सकता है. इस उदाहरण में, #1 को दो कॉलम और दो लाइनों वाले ग्रिड एरिया के बीच में रखा गया है.

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    },
) {
    Text(
        text = "#1",
        modifier = Modifier
            .gridItem(
                rowSpan = 2,
                columnSpan = 2,
                alignment = Alignment.Center
            ),
    )
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

अपने-आप प्लेसमेंट होने की सुविधा के साथ-साथ, मैन्युअल तरीके से प्लेस किए गए आइटम

Grid में मौजूद जिस यूज़र इंटरफ़ेस (यूआई) एलिमेंट की पोज़िशन तय नहीं की गई है उसे अपने-आप प्लेस कर दिया जाता है. इस उदाहरण में बताया गया है कि अपने-आप जगह तय करने वाले एलिमेंट और यूज़र इंटरफ़ेस (यूआई) एलिमेंट को, तय की गई ग्रिड सेल के साथ कैसे मिक्स किया जा सकता है. कार्ड #2 और कार्ड #4 को ग्रिड सेल के तौर पर सेट किया गया है. वहीं, अन्य आइटम अपने-आप सेट हो जाते हैं.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3()
    Card4(modifier = Modifier.gridItem(row = 3, column = 1))
    Card5()
    Card6()
}
GridItem.kt