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

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

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

row और column पैरामीटर की मदद से, किसी आइटम को किसी खास ट्रैक या सेल में रखें. कोऑर्डिनेट इंडेक्स, सीधे-सादे ग्रिड लेआउट के लिए सबसे सही होते हैं. बड़े या ज़्यादा जटिल लेआउट के लिए, नाम वाले एरिया तय करें.

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

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

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

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