ग्रिड टेबल लेआउट

इस रेसिपी में बताया गया है कि पारंपरिक नेस्टेड स्ट्रक्चर की तुलना में, Grid API की मदद से कोड को आसानी से कैसे पढ़ा जा सकता है. ऑटो-साइज़ वाले ट्रैक कॉन्फ़िगर करके, एक ग्रिड बनाया जा सकता है. यह ग्रिड, टेक्स्ट कंपोज़ेबल के इंट्रिंसिक साइज़ के आधार पर, सेल की चौड़ाई और ऊंचाई के हिसाब से डाइनैमिक तरीके से अडजस्ट होता है.

इस रेसिपी में, Grid API का इस्तेमाल करके एक टेबल बनाई जाती है.

सबसे सही तरीके

टेबल को आसानी से पढ़ने और मैनेज करने के लिए, Grid कंपोज़ेबल का इस्तेमाल करें. Grid की मदद से, कॉलम के डाइमेंशन और सभी लाइनों के अलाइनमेंट पर सटीक कंट्रोल पाया जा सकता है. इसके लिए, चौड़ाई को मैन्युअल तरीके से सिंक करने की ज़रूरत नहीं होती.

सामग्री

• Grid: यह एक कंपोज़ेबल लेआउट है, जो आइटम को दो डाइमेंशन वाले ग्रिड में रखता है. लेआउट का कॉन्फ़िगरेशन, config लैम्डा पैरामीटर में तय किया जाता है. वहीं, यूज़र इंटरफ़ेस (यूआई) के कॉन्टेंट आइटम, content लैम्डा पैरामीटर में तय किए जाते हैं.
• GridTrackSize.Auto: इससे ग्रिड कॉन्फ़िगरेशन में, ट्रैक का साइज़ अपने-आप तय होता है. यह साइज़, कॉन्टेंट के इंट्रिंसिक साइज़ के आधार पर तय होता है. उदाहरण के लिए, column(GridTrackSize.Auto) और row(GridTrackSize.Auto).
• gap(): इससे GridConfigurationScope में, लाइन और कॉलम के बीच की जगह कॉन्फ़िगर की जाती है. जैसे, gap(row = 8.dp, column = 16.dp).

चरण

एक ही Grid लेआउट का इस्तेमाल करके, कई कॉलम वाली तुलना टेबल बनाएं. इसमें सभी आइटम के लिए, कॉलम का अलाइनमेंट और ट्रैक का साइज़ अपने-आप तय होगा.

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

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

• कॉलम: तुलना किए जा रहे एट्रिब्यूट की संख्या. साथ ही, आइटम के नाम के लिए एक कॉलम.
• लाइनें: तुलना किए जा रहे आइटम की संख्या. साथ ही, हेडर की एक लाइन.

इस रेसिपी में, चार एट्रिब्यूट के आधार पर दो कॉम्पोनेंट (FlexBox और Grid) की तुलना की गई है. इसके लिए, आपको पांच कॉलम और तीन लाइनों की ज़रूरत होगी.

2. ग्रिड का इस्तेमाल करके, तुलना टेबल लागू करना

TableInGrid कंपोज़ेबल बनाएं. यह कंपोज़ेबल, टेबल के आइटम को लेआउट करने के लिए Grid का इस्तेमाल करता है. ट्रैक के साइज़ तय करने के लिए, config लैम्डा में column और row फ़ंक्शन कॉल करें. साथ ही, gap() की मदद से सेल के बीच की जगह सेट करें. टेक्स्ट का इंट्रिंसिक साइज़ होता है. इसलिए, GridTrackSize.Auto की मदद से कॉलम और लाइनों का साइज़ अपने-आप तय हो जाता है, ताकि वे अपने कॉन्टेंट में फ़िट हो सकें.

content लैम्डा में, टेबल के हेडर और डेटा डालें. Grid सभी सेल की जगह और अलाइनमेंट को अपने-आप मैनेज करता है:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}
GridByExamples.kt

नतीजे

अब आपने दो डाइमेंशन वाली एक साफ़-सुथरी तुलना टेबल बना ली है. इसमें कॉलम का अलाइनमेंट और सेल के बीच की जगह अपने-आप तय होती है.

अन्य संसाधन

• Compose में ग्रिड
• कंटेनर की प्रॉपर्टी सेट करना