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

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