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

इन XR डिवाइसों पर काम करने वाले ऐप्लिकेशन

इस गाइड की मदद से, इन XR डिवाइसों के लिए ऐप्लिकेशन बनाए जा सकते हैं.

XR डिवाइसों के टाइप के बारे में जानकारी →

XR डिवाइसों के टाइप के बारे में जानकारी →

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

फ़ोकस का व्यवहार और चाइल्ड आइटम

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

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

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

नीचे दिए गए कोड से पता चलता है कि आइटम और आइटम के डीएसएल तरीकों के साथ, वर्टिकल सूची का इस्तेमाल करके आइटम की सूची कैसे बनाई जाती है:

@Composable
fun VerticalListSample() {
    VerticalList {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
ListSamples.kt

उदाहरण: टाइटल स्लॉट वाली वर्टिकल सूची

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

नीचे दिए गए कोड से, टाइटल स्लॉट वाली वर्टिकल सूची बनाई जाती है:

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

प्रोग्राम के ज़रिए सूची से जुड़ी कार्रवाइयां करने के लिए, सूची की स्थिति का इस्तेमाल करना

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

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