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

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

आइटम की पोज़िशन सेट करना

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

row और column पैरामीटर, पंक्ति और कॉलम ट्रैक इंडेक्स तय करते हैं जिनमें आइटम रखा जाता है. ट्रैक इंडेक्स, 1 से शुरू होते हैं. सिर्फ़ 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 को दो पंक्तियों और दो कॉलम वाले एरिया में रखा गया है (दूसरी इमेज).

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

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

ग्रिड एरिया में यूज़र इंटरफ़ेस (यूआई) एलिमेंट का अलाइनमेंट सेट किया जा सकता है alignment पैरामीटर में अलाइनमेंट तय करके, gridItem मॉडिफ़ायर के. यहां दिए गए उदाहरण में, #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