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

कॉन्टेंट बनाने 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

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

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