Jetpack Compose Glimmer में वर्टिकल स्टैक

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

Jetpack Compose Glimmer में, VerticalStack एक लेज़ी और वर्टिकल तौर पर स्क्रोल किया जा सकने वाला लेआउट है. यह आइटम को विज़ुअल तौर पर ओवरलैप करने वाले, थ्री-डाइमेंशनल सीक्वेंस में व्यवस्थित करता है. मुख्य आइटम को फ़ोरग्राउंड में प्रमुखता से दिखाया जाता है. वहीं, इसके बाद के आइटम को इसके पीछे रखा जाता है.

पहली इमेज. Jetpack Compose Glimmer में स्टैक की कुछ अलग-अलग स्टाइल का उदाहरण.

स्क्रोल करने और पोज़िशन सेट करने के तरीके

स्टैक में आइटम, छोटे और ओवरलैप होने वाले लेआउट में व्यवस्थित किए जाते हैं. इसलिए, इनके कुछ व्यवहार, क्रम से लगाए गए अन्य कॉम्पोनेंट, जैसे कि सूचियों से अलग होते हैं:

  • जब कोई उपयोगकर्ता वर्टिकल तौर पर स्क्रोल करता है, तो ऐक्टिव फ़ोरग्राउंड आइटम, व्यू से बाहर चला जाता है. इससे ठीक नीचे मौजूद आइटम, फ़ोरग्राउंड में सबसे ऊपर दिखने लगता है.
  • उपयोगकर्ता के जेस्चर खत्म होने के बाद, आइटम हमेशा स्नैप-ऐनिमेट होते हैं. इसके लिए, खास स्प्रिंग ऐनिमेशन का इस्तेमाल किया जाता है. इससे आइटम, फ़ोरग्राउंड में अपनी जगह पर आ जाते हैं.
  • आइटम को z-ऐक्सिस के साथ रखा जाता है. सूची में मौजूद आइटम को मुख्य आइटम के पीछे रखा जाता है.

फ़ोकस मैनेजमेंट

VerticalStack में एक खास फ़ोकस सिस्टम का इस्तेमाल किया जाता है. इससे यह पक्का होता है कि मौजूदा फ़ोरग्राउंड आइटम हमेशा उपयोगकर्ता के इंटरैक्शन का मुख्य टारगेट हो:

  • शुरुआती फ़ोकस और फिर से फ़ोकस करना: शुरुआती फ़ोकस और फिर से फ़ोकस करने की सुविधा, स्टैक के मौजूदा टॉप आइटम पर जाती है.
  • ऑटो-फ़ोकस की सूचना: आइटम के ट्रांज़िशन के दौरान, स्टैक सबसे ऊपर मौजूद आइटम पर फ़ोकस करने का अनुरोध करता है.
  • फ़ोकस ट्रैकिंग: हर आइटम, onFocusChanged का इस्तेमाल करके StackState को अपने फ़ोकस स्टेटस के बारे में सूचना देता है.

उदाहरण: वर्टिकल स्टैक बनाना

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

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}

कोड के बारे में अहम बातें

  • इससे टेक्स्ट के LocalTextStyle के लिए textMotion को Animated पर सेट किया जाता है. इससे लेआउट ऐनिमेशन या स्केलिंग ट्रांज़िशन के दौरान, टेक्स्ट को आसानी से रेंडर करने में मदद मिलती है. साथ ही, पिक्सल-स्नैपिंग आर्टफ़ैक्ट को रोकने में भी मदद मिलती है.
  • यह वर्टिकल स्टैक की ऊंचाई के लिए, 364.dp का साइज़ तय करता है. हमेशा कोई खास ऊंचाई दें, ऊंचाई में बदलाव करने वाले मॉडिफ़ायर का इस्तेमाल करें या कार्ड ट्रांज़िशन के लिए विज़ुअल एरिया तय करने के लिए, fillMaxSize मॉडिफ़ायर लागू करें.
  • अन्य कॉम्पोनेंट की तरह, VerticalStack सीधे तौर पर शेप पैरामीटर नहीं लेता. यह itemDecoration मॉडिफ़ायर का इस्तेमाल करके, अपने आइटम की विज़ुअल बाउंड्री मैनेज करता है. इस उदाहरण में, शुरुआती आइटम के itemDecoration के लिए वही शेप पास किया गया है जो सभी चाइल्ड आइटम के लिए किया गया है, ताकि क्लिप करने और विज़ुअल इफ़ेक्ट को एक जैसा रखा जा सके. इस उदाहरण में, डिफ़ॉल्ट CardDefaults.shape का इस्तेमाल किया गया है.