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

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

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

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

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

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

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

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

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

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

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

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

@Composable
fun VerticalStackSample() {
    VerticalStack {
        item {
            Card { Text("Top Card") }
        }
        item {
            Card { Text("Second Card") }
        }
        item {
            Card { Text("Third Card") }
        }
    }
}