मॉडिफ़ायर स्क्रोल करें

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

@Composable
private fun ScrollBoxes() {
    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .verticalScroll(rememberScrollState())
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}

स्क्रोल करने के जेस्चर के हिसाब से काम करने वाली एक आसान वर्टिकल सूची
पहली इमेज. स्क्रोल जेस्चर का जवाब देने वाली एक आसान वर्टिकल सूची.

ScrollState की मदद से, स्क्रोल की पोज़िशन बदली जा सकती है या उसकी मौजूदा स्थिति देखी जा सकती है. डिफ़ॉल्ट पैरामीटर के साथ इसे बनाने के लिए, rememberScrollState() का इस्तेमाल करें.

@Composable
private fun ScrollBoxesSmooth() {
    // Smoothly scroll 100px on first composition
    val state = rememberScrollState()
    LaunchedEffect(Unit) { state.animateScrollTo(100) }

    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .padding(horizontal = 8.dp)
            .verticalScroll(state)
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}

स्क्रोल किए जा सकने वाले एरिया का मॉडिफ़ायर

scrollableArea मॉडिफ़ायर, कस्टम स्क्रोल किए जा सकने वाले कंटेनर बनाने के लिए एक बुनियादी बिल्डिंग ब्लॉक है. यह scrollable मॉडिफ़ायर के मुकाबले, ज़्यादा बेहतर तरीके से काम करता है. साथ ही, जेस्चर डेल्टा इंटरप्रिटेशन, कॉन्टेंट क्लिपिंग, और ओवरस्क्रोल इफ़ेक्ट जैसी सामान्य ज़रूरतों को पूरा करता है.

scrollableArea का इस्तेमाल, कस्टम इंप्लिमेंटेशन के लिए किया जाता है. हालांकि, आपको आम तौर पर, स्टैंडर्ड स्क्रोलिंग सूचियों के लिए, verticalScroll, horizontalScroll जैसे पहले से तैयार समाधान या LazyColumn जैसे कंपोज़ेबल को प्राथमिकता देनी चाहिए. ये हाई-लेवल कॉम्पोनेंट, सामान्य इस्तेमाल के उदाहरणों के लिए आसान होते हैं. इन्हें scrollableArea का इस्तेमाल करके बनाया जाता है.

scrollableArea और scrollable मॉडिफ़ायर के बीच अंतर

scrollableArea और scrollable के बीच मुख्य अंतर यह है कि वे उपयोगकर्ता के स्क्रोल जेस्चर को कैसे समझते हैं:

  • scrollable (रॉ डेल्टा): डेल्टा, स्क्रीन पर उपयोगकर्ता के इनपुट (जैसे, पॉइंटर को खींचना और छोड़ना) के फ़िज़िकल मूवमेंट को सीधे तौर पर दिखाता है.
  • scrollableArea (कॉन्टेंट के हिसाब से डेल्टा): स्क्रोल पोज़िशन में चुने गए बदलाव को दिखाने के लिए, delta को सिमैंटिक तौर पर उलटा किया जाता है. इससे कॉन्टेंट, उपयोगकर्ता के जेस्चर के साथ मूव करता हुआ दिखता है. आम तौर पर, यह पॉइंटर के मूवमेंट के उलट होता है.

इसे इस तरह समझें: scrollable से पता चलता है कि पॉइंटर कैसे मूव हुआ, जबकि scrollableArea उस पॉइंटर मूवमेंट को इस तरह ट्रांसलेट करता है कि कॉन्टेंट को स्क्रोल किए जा सकने वाले सामान्य व्यू में कैसे मूव करना चाहिए. इस इनवर्ज़न की वजह से, स्टैंडर्ड स्क्रोल किए जा सकने वाले कंटेनर को लागू करते समय, scrollableArea ज़्यादा नैचुरल लगता है.

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

उपयोगकर्ता का जेस्चर

scrollable ने dispatchRawDelta को डेल्टा की जानकारी दी

scrollableArea ने dispatchRawDelta को डेल्टा की जानकारी दी*

पॉइंटर ऊपर की ओर मूव करता है

नेगेटिव

पॉज़िटिव

पॉइंटर नीचे की ओर मूव करता है

पॉज़िटिव

नेगेटिव

पॉइंटर बाईं ओर मूव करता है

नेगेटिव

पॉज़िटिव (दाएं से बाएं लिखे जाने वाले टेक्स्ट के लिए नेगेटिव)

पॉइंटर दाईं ओर मूव करता है

पॉज़िटिव

Negative (दाएं से बाएं लिखे जाने वाले टेक्स्ट के लिए Positive)

(*) scrollableArea डेल्टा साइन के बारे में जानकारी: scrollableArea से डेल्टा का साइन, सिर्फ़ एक सामान्य इनवर्ज़न नहीं है. यह इन बातों का ध्यान रखता है:

  1. ओरिएंटेशन: वर्टिकल या हॉरिज़ॉन्टल.
  2. LayoutDirection: एलटीआर या आरटीएल (खास तौर पर हॉरिज़ॉन्टल स्क्रोलिंग के लिए ज़रूरी).
  3. reverseScrolling फ़्लैग: इससे पता चलता है कि स्क्रोल करने की दिशा उल्टी है या नहीं.

स्क्रोल डेल्टा को उलटने के अलावा, scrollableArea कॉन्टेंट को लेआउट की सीमाओं के हिसाब से क्लिप भी करता है. साथ ही, ओवरस्क्रोल इफ़ेक्ट को रेंडर करने की प्रोसेस को मैनेज करता है. डिफ़ॉल्ट रूप से, यह LocalOverscrollFactory के इफ़ेक्ट का इस्तेमाल करता है. scrollableArea ओवरलोड का इस्तेमाल करके, इसे पसंद के मुताबिक बनाया जा सकता है या बंद किया जा सकता है. यह ओवरलोड, OverscrollEffect पैरामीटर को स्वीकार करता है.

scrollableArea मॉडिफ़ायर का इस्तेमाल कब करना चाहिए

scrollableArea मॉडिफ़ायर का इस्तेमाल तब करें, जब आपको पसंद के मुताबिक स्क्रोल करने वाला कॉम्पोनेंट बनाना हो. ऐसा तब करें, जब horizontalScroll या verticalScroll मॉडिफ़ायर या लेज़ी लेआउट से आपकी ज़रूरत पूरी न हो रही हो. आम तौर पर, इसमें ऐसे मामले शामिल होते हैं जिनमें:

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

scrollableArea का इस्तेमाल करके, व्हील जैसी कस्टम सूचियां बनाएं

यहां दिए गए सैंपल में, scrollableArea का इस्तेमाल करके पसंद के मुताबिक वर्टिकल लिस्ट बनाने का तरीका बताया गया है. इसमें आइटम, सेंटर से दूर जाने पर छोटे हो जाते हैं. इससे "पहिए जैसा" विज़ुअल इफ़ेक्ट बनता है. स्क्रोल करने पर होने वाला इस तरह का बदलाव, scrollableArea के इस्तेमाल का एक बेहतरीन उदाहरण है.

दूसरी इमेज. scrollableArea का इस्तेमाल करके बनाई गई, पसंद के मुताबिक वर्टिकल सूची.

@Composable
private fun ScrollableAreaSample() {
    // ...
    Layout(
        modifier =
            Modifier
                .size(150.dp)
                .scrollableArea(scrollState, Orientation.Vertical)
                .background(Color.LightGray),
        // ...
    ) { measurables, constraints ->
        // ...
        // Update the maximum scroll value to not scroll beyond limits and stop when scroll
        // reaches the end.
        scrollState.maxValue = (totalHeight - viewportHeight).coerceAtLeast(0)

        // Position the children within the layout.
        layout(constraints.maxWidth, viewportHeight) {
            // The current vertical scroll position, in pixels.
            val scrollY = scrollState.value
            val viewportCenterY = scrollY + viewportHeight / 2

            var placeableLayoutPositionY = 0
            placeables.forEach { placeable ->
                // This sample applies a scaling effect to items based on their distance
                // from the center, creating a wheel-like effect.
                // ...
                // Place the item horizontally centered with a layer transformation for
                // scaling to achieve wheel-like effect.
                placeable.placeRelativeWithLayer(
                    x = constraints.maxWidth / 2 - placeable.width / 2,
                    // Offset y by the scroll position to make placeable visible in the viewport.
                    y = placeableLayoutPositionY - scrollY,
                ) {
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                // Move to the next item's vertical position.
                placeableLayoutPositionY += placeable.height
            }
        }
    }
}
// ...

स्क्रोल करने लायक मॉडिफ़ायर

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

ScrollableState बनाते समय, आपको consumeScrollDelta फ़ंक्शन देना होगा. इसे हर स्क्रोल स्टेप (जेस्चर इनपुट, आसानी से स्क्रोल करने या फ़्लिंग करने की सुविधा) पर, पिक्सल में डेल्टा के साथ ट्रिगर किया जाएगा. इस फ़ंक्शन को स्क्रोल करने की दूरी की जानकारी देनी होगी. इससे यह पक्का किया जा सकेगा कि इवेंट को उन मामलों में सही तरीके से लागू किया गया है जहां नेस्ट किए गए एलिमेंट में scrollable मॉडिफ़ायर मौजूद है.

यहां दिया गया स्निपेट, जेस्चर का पता लगाता है और ऑफ़सेट के लिए संख्या वाली वैल्यू दिखाता है. हालांकि, यह किसी भी एलिमेंट को ऑफ़सेट नहीं करता:

@Composable
private fun ScrollableSample() {
    // actual composable state
    var offset by remember { mutableFloatStateOf(0f) }
    Box(
        Modifier
            .size(150.dp)
            .scrollable(
                orientation = Orientation.Vertical,
                // Scrollable state: describes how to consume
                // scrolling delta and update offset
                state = rememberScrollableState { delta ->
                    offset += delta
                    delta
                }
            )
            .background(Color.LightGray),
        contentAlignment = Alignment.Center
    ) {
        Text(offset.toString())
    }
}

यूज़र इंटरफ़ेस (यूआई) एलिमेंट, जो उंगली से किए गए प्रेस का पता लगाता है और उंगली की जगह की न्यूमेरिक वैल्यू दिखाता है
तीसरी इमेज. यूज़र इंटरफ़ेस (यूआई) का एक एलिमेंट, जो उंगली के दबाव का पता लगाता है और उंगली की जगह की न्यूमेरिक वैल्यू दिखाता है.
पीछे जाएं
स्क्रोल के फ़ेज़ के बारे में जानकारी
आगे बढ़ें
नेस्ट किए गए स्क्रोल मॉडिफ़ायर