Jetpack Compose Glimmer में सूचियां

एक्सआर डिवाइसों पर लागू होने वाली सुविधाएं
इस गाइड की मदद से, इन तरह के एक्सआर डिवाइसों के लिए अनुभव बनाए जा सकते हैं.
XR डिवाइसों के टाइप के बारे में जानें →
डिसप्ले ग्लास
XR डिवाइसों के टाइप के बारे में जानें →

Jetpack Compose Glimmer में, GlimmerLazyColumn, Compose LazyColumn की तरह ही काम करता है. यह सिर्फ़ दिखने वाले आइटम को कंपोज़ और लेआउट करता है, ताकि बेहतर परफ़ॉर्मेंस बनी रहे. हालांकि, Glimmer के लेज़ी कॉलम, डिसप्ले ग्लास कंट्रोल के लिए बनाए गए हैं. इनमें उपयोगकर्ता, टचस्क्रीन के बजाय टचपैड का इस्तेमाल करके इंटरैक्ट करता है. मोबाइल उपयोगकर्ता, स्क्रीन पर किसी भी जगह पर कभी भी टैप कर सकता है. हालांकि, डिसप्ले ग्लास का इस्तेमाल करने वाला व्यक्ति सिर्फ़ उस आइटम से इंटरैक्ट कर सकता है जिस पर फ़ोकस किया गया है.

पहली इमेज. Jetpack Compose Glimmer में, अलग-अलग स्टाइल वाली सूचियों का उदाहरण.

फ़ोकस करने का तरीका और चाइल्ड आइटम

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

इसमें सीधे तौर पर टच इनपुट नहीं होता है. इसलिए, Glimmer lazy column में मौजूद सभी चाइल्ड आइटम को फ़ोकस किया जा सकता है. जब आइटम पर फ़ोकस किया जाता है, तब विज़ुअल रिस्पॉन्स भी दें. जैसे, ऐक्टिव बॉर्डर या हाइलाइट. उपयोगकर्ता अब भी फ़ोकस न किए जा सकने वाले आइटम को स्क्रोल कर सकते हैं. हालांकि, वे उनसे इंटरैक्ट नहीं कर सकते. जब भी हो सके, ListItem या Card जैसे पहले से मौजूद कॉम्पोनेंट का इस्तेमाल करें. ऐसा इसलिए, क्योंकि इन कॉम्पोनेंट पर पहले से ही फ़ोकस किया जा सकता है. साथ ही, ये फ़ोकस की स्थितियों के लिए विज़ुअल फ़ीडबैक देते हैं.

उदाहरण: एक से ज़्यादा आइटम वाले ग्लिमर लेज़ी कॉलम

यहां दिए गए कोड में, आइटम की सूची बनाने के लिए, Glimmer लेज़ी कॉलम के साथ आइटम और items DSL तरीकों का इस्तेमाल करने का तरीका दिखाया गया है:

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}

उदाहरण: टाइटल स्लॉट के साथ Glimmer लेज़ी कॉलम

Jetpack Compose Glimmer, GlimmerLazyColumn का ओवरलोड भी उपलब्ध कराता है. इसमें टाइटल स्लॉट होता है. टाइटल पर फ़ोकस नहीं किया जा सकता. आम तौर पर, यह TitleChip होता है. यह टाइटल, स्क्रीन के सबसे ऊपर बीच में स्थिर रहता है. वहीं, सूची का कॉन्टेंट इसके नीचे स्क्रोल होता है.

नीचे दिया गया कोड, टाइटल स्लॉट के साथ Glimmer लेज़ी कॉलम बनाता है:

@Composable
fun GlimmerLazyColumnWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}

प्रोग्राम के हिसाब से सूची के ऑपरेशन के लिए, Glimmer की लेज़ी लिस्ट की स्थिति का इस्तेमाल करें

firstVisibleItemIndex और firstVisibleItemScrollOffset प्रॉपर्टी का इस्तेमाल करके, सूची की स्थिति के अलग-अलग पहलुओं को कंट्रोल और मॉनिटर किया जा सकता है. जैसे, उसकी स्क्रोल पोज़िशन. इसके लिए, GlimmerLazyListState का इस्तेमाल करें.

rememberGlimmerLazyListState का इस्तेमाल करके, इस स्थिति को ऊपर ले जाया जा सकता है. इससे scrollToItem और animateScrollToItem का इस्तेमाल करके, प्रोग्राम के हिसाब से स्क्रोल किया जा सकता है.