खींचें, स्वाइप करें, और फ़्लिंग करें

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

ध्यान दें कि यह मॉडिफ़ायर scrollable से मिलता-जुलता है, क्योंकि सिर्फ़ जेस्चर का पता लगाता है. आपको स्टेटस को होल्ड करके, स्क्रीन पर दिखाना होगा. उदाहरण के लिए, offset मेंड्यूरेटर की मदद से एलिमेंट को मूव करके:

@Composable
private fun DraggableText() {
    var offsetX by remember { mutableStateOf(0f) }
    Text(
        modifier = Modifier
            .offset { IntOffset(offsetX.roundToInt(), 0) }
            .draggable(
                orientation = Orientation.Horizontal,
                state = rememberDraggableState { delta ->
                    offsetX += delta
                }
            ),
        text = "Drag me!"
    )
}
GesturesSnippets.kt

अगर आपको खींचकर छोड़ने के जेस्चर को कंट्रोल करना है, तो खींचें और छोड़ें इसके बजाय, जेस्चर डिटेक्टर pointerInput कार्रवाई बदलने वाली कुंजी.

@Composable
private fun DraggableTextLowLevel() {
    Box(modifier = Modifier.fillMaxSize()) {
        var offsetX by remember { mutableStateOf(0f) }
        var offsetY by remember { mutableStateOf(0f) }

        Box(
            Modifier
                .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
                .background(Color.Blue)
                .size(50.dp)
                .pointerInput(Unit) {
                    detectDragGestures { change, dragAmount ->
                        change.consume()
                        offsetX += dragAmount.x
                        offsetY += dragAmount.y
                    }
                }
        )
    }
}
GesturesSnippets.kt

स्वाइप करना

कॉन्टेंट बनाने swipeable मॉडिफ़ायर की मदद से, उन एलिमेंट को खींचकर छोड़ा जा सकता है जो रिलीज़ होने पर आम तौर पर ऐनिमेट होते हैं किसी ओरिएंटेशन में दो या ज़्यादा ऐंकर पॉइंट. आम तौर पर, इसका इस्तेमाल 'स्‍वाइप करके हटाएं' पैटर्न को लागू करने के लिए किया जाता है.

चेतावनी: Jetpack Compose 1.6.0-alpha01 में, swipeable एपीआई को फ़ाउंडेशन के anchoredDraggable एपीआई से बदल दिया गया है.

ध्यान दें कि यह मॉडिफ़ायर सिर्फ़ एलिमेंट को मूव नहीं करता, बल्कि यह सिर्फ़ एलिमेंट को मूव करता है जेस्चर का पता लगाता है. आपको स्टेटस को होल्ड करके, स्क्रीन पर दिखाना होगा. उदाहरण के लिए, offset मॉडिफ़ायर की मदद से एलिमेंट को मूव करना.

swipeable मॉडिफ़ायर में, स्वाइप करने की स्थिति डालना ज़रूरी है और इसे बनाया जा सकता है और याद रखा जाता है rememberSwipeableState(). यह स्टेटस, ऐनकर पर प्रोग्राम के हिसाब से ऐनिमेशन देने के लिए, काम के तरीकों का एक सेट भी उपलब्ध कराता है. इन तरीकों के बारे में जानने के लिए, snapTo, animateTo, performFling, और performDrag देखें. साथ ही, इसमें खींचने और छोड़ने की प्रोसेस को देखने के लिए प्रॉपर्टी भी होती हैं.

स्वाइप जेस्चर को अलग-अलग थ्रेशोल्ड टाइप के लिए कॉन्फ़िगर किया जा सकता है. जैसे, FixedThreshold(Dp) और FractionalThreshold(Float). ये हर ऐंकर पॉइंट के 'इससे-इसतक' कॉम्बिनेशन के लिए अलग-अलग हो सकते हैं.

ज़्यादा विकल्प के लिए, पिछली बार से आगे की ओर स्वाइप करते समय, resistance को कॉन्फ़िगर किया जा सकता है सीमा से लेकर, velocityThreshold जो अगली स्थिति, भले ही उसकी पोज़िशनिंग thresholdsतक न हुई हो.

@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun SwipeableSample() {
    val width = 96.dp
    val squareSize = 48.dp

    val swipeableState = rememberSwipeableState(0)
    val sizePx = with(LocalDensity.current) { squareSize.toPx() }
    val anchors = mapOf(0f to 0, sizePx to 1) // Maps anchor points (in px) to states

    Box(
        modifier = Modifier
            .width(width)
            .swipeable(
                state = swipeableState,
                anchors = anchors,
                thresholds = { _, _ -> FractionalThreshold(0.3f) },
                orientation = Orientation.Horizontal
            )
            .background(Color.LightGray)
    ) {
        Box(
            Modifier
                .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) }
                .size(squareSize)
                .background(Color.DarkGray)
        )
    }
}
GesturesSnippets.kt