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

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 मोडिफ़ायर की मदद से, एलिमेंट को खींचा और छोड़ा जा सकता है. ऐसा करने पर, वे आम तौर पर ओरिएंटेशन में तय किए गए दो या उससे ज़्यादा ऐंकर पॉइंट की ओर ऐनिमेट होते हैं. आम तौर पर, इसका इस्तेमाल 'स्‍वाइप करके हटाएं' पैटर्न को लागू करने के लिए किया जाता है.

ध्यान रखें कि यह मॉडिफ़ायर, एलिमेंट को नहीं घुमाता. यह सिर्फ़ जेस्चर का पता लगाता है. आपको स्टेटस को होल्ड करके, स्क्रीन पर दिखाना होगा. उदाहरण के लिए, 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

स्वाइप जेस्चर का जवाब देने वाला यूज़र इंटरफ़ेस (यूआई) एलिमेंट

पीछे जाएं
स्क्रोल करना
आगे बढ़ें
मल्टी-टच जेस्चर