Wear OS के लिए, Compose में मौजूद सूचियां


Wear OS डिवाइसों पर, सूचियों की मदद से उपयोगकर्ता विकल्पों के सेट में से कोई आइटम चुन सकते हैं.

Wear OS वाले कई डिवाइसों में गोल स्क्रीन होती हैं. इस वजह से, स्क्रीन के सबसे ऊपर और सबसे नीचे दिखने वाले आइटम को देखना मुश्किल हो जाता है. इस वजह से, Compose for Wear OS में LazyColumn क्लास का एक वर्शन शामिल है, जिसे TransformingLazyColumn कहा जाता है. यह स्केलिंग और मॉर्फ़िंग ऐनिमेशन के साथ काम करता है. जब आइटम किनारों की ओर जाते हैं, तो वे छोटे हो जाते हैं और धुंधले हो जाते हैं.

सुझाए गए स्केलिंग और स्क्रोलिंग इफ़ेक्ट लागू करने के लिए:

  1. Modifier.transformedHeight का इस्तेमाल करें, ताकि कंपोज़र को स्क्रीन पर आइटम स्क्रोल होने पर ऊंचाई में हुए बदलाव का हिसाब लगाने की अनुमति मिल सके.
  2. आइटम के कॉन्टेंट को छोटा करने के साथ-साथ, विज़ुअल इफ़ेक्ट लागू करने के लिए transformation = SurfaceTransformation(transformationSpec) का इस्तेमाल करें.
  3. उन कॉम्पोनेंट के लिए कस्टम TransformationSpec का इस्तेमाल करें जो transformation को पैरामीटर के तौर पर नहीं लेते. जैसे, Text.

इस एनिमेशन में दिखाया गया है कि स्क्रीन के सबसे ऊपर और सबसे नीचे पहुंचने पर, सूची का एलिमेंट कैसे स्केल होता है और उसका आकार कैसे बदलता है:

यहां दिए गए कोड स्निपेट में, TransformingLazyColumn लेआउट का इस्तेमाल करके सूची बनाने का तरीका बताया गया है. इससे ऐसा कॉन्टेंट बनाया जा सकता है जो Wear OS की अलग-अलग स्क्रीन साइज़ पर शानदार दिखता है.

स्निपेट में minimumVerticalContentPadding मॉडिफ़ायर के इस्तेमाल के बारे में भी बताया गया है. आपको सूची के आइटम पर इसे सेट करना चाहिए, ताकि सूची के ऊपर और नीचे सही पैडिंग लागू की जा सके.

स्क्रोल इंडिकेटर दिखाने के लिए, ScreenScaffold और TransformingLazyColumn के बीच columnState शेयर करें:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}

स्नैप-एंड-फ़्लिंग इफ़ेक्ट जोड़ना

अगर आपको स्नैप-एंड-फ़्लिंग का व्यवहार जोड़ना है, तो flingBehavior पैरामीटर को TransformingLazyColumnDefaults.snapFlingBehavior(columnState) पर सेट करें. जैसा कि यहां दिए गए कोड स्निपेट में दिखाया गया है:
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}