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

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

Wear OS के कई डिवाइसों में गोल स्क्रीन इस्तेमाल होती है. इस वजह से, उन्हें देखना और भी मुश्किल हो जाता है सूची आइटम जो स्क्रीन के ऊपर और नीचे दिखाई देते हैं. इस वजह से, Wear OS के लिए लिखने की सुविधा में, इस नाम से LazyColumn क्लास का एक वर्शन शामिल है ScalingLazyColumn, जो स्केलिंग और फ़ेडिंग इफ़ेक्ट के साथ काम करता है. जब आइटम की ओर बढ़ने पर स्क्रीन के बीच में आ जाते हैं, तो वे बड़े और ज़्यादा अपारदर्शी हो जाते हैं.

नीचे दिया गया ऐनिमेशन दिखाता है कि एलिमेंट का साइज़ और पारदर्शिता, तो वह स्क्रीन पर चलता है:

नीचे दिया गया कोड स्निपेट यह दिखाता है कि हॉरोलॉजिस्ट ScalingLazyColumn लेआउट के वर्शन का इस्तेमाल करके ऐसा किया जा सकता है अलग-अलग Wear OS स्क्रीन साइज़ पर शानदार दिखता है. उदाहरण के लिए, उदाहरण के तौर पर नीचे दिया गया है, यह पहले और आखिरी एलिमेंट में ज़रूरी पैडिंग (जगह) जोड़ देगा ScalingLazyColumn के scrollState में सेट की गई सूची में मौजूद हैं:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

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

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

इस इफ़ेक्ट को ScalingLazyColumn के हॉरोलॉजिस्ट के वर्शन में जोड़ने के लिए, columnState के rotaryMode पैरामीटर को इस पर सेट करें RotaryWithSnap, जैसा कि इस कोड स्निपेट में दिखाया गया है:

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt