स्वाइप करने की सुविधा से anchoredDraggable में माइग्रेट करें

Swipeable एक Compose Material API है. इसकी मदद से, ऐसे कॉम्पोनेंट बनाए जा सकते हैं जिन्हें अलग-अलग स्थितियों के बीच स्वाइप किया जा सकता है. जैसे, बॉटम शीट, ड्रॉअर या स्वाइप करके खारिज करने की सुविधा. ऐडवांस इस्तेमाल के उदाहरणों को बेहतर तरीके से सपोर्ट करने के लिए, Compose-Foundation 1.6.0-alpha01 में एक नया ऐंकर पब्लिश किया गया था. जैसे, ऐसे ऐंकर जो किसी कॉम्पोनेंट के साइज़ पर निर्भर करते हैं: AnchoredDraggable. AnchoredDraggable, ऐंकर की गई स्थितियों वाले ड्रैग किए जा सकने वाले कॉम्पोनेंट बनाने के लिए एक बुनियादी एपीआई है. जैसे, बॉटम शीट, ड्रॉअर या स्वाइप करके खारिज करने की सुविधा.

Material के Swipeable एपीआई अब काम नहीं करते. इनकी जगह Foundation के AnchoredDraggable एपीआई का इस्तेमाल किया जा सकता है. इन्हें आने वाले समय में हटा दिया जाएगा. इस गाइड में, Swipeable एपीआई से AnchoredDraggable पर माइग्रेट करने का तरीका बताया गया है.

SwipeableState से AnchoredDraggableState पर माइग्रेट करना

सबसे पहले, अपने स्टेट होल्डर में हुए बदलावों की पहचान करें. AnchoredDraggableState को इनहेरिट नहीं किया जा सकता. साथ ही, इसे शुरू करने से पहले ऑफ़सेट को Float.NaN के तौर पर दिखाया जाता है.

स्टेट होल्डर की जानकारी अपडेट करना

AnchoredDraggableState एक फ़ाइनल क्लास है. इसका मतलब है कि इसे इनहेरिट नहीं किया जा सकता. अगर आपका मौजूदा कॉम्पोनेंट, SwipeableState से इनहेरिट करता है, तो अपने स्टेट होल्डर को अपडेट करें. इससे वह AnchoredDraggableState का रेफ़रंस सेव कर पाएगा. इसके लिए, उसे AnchoredDraggableState से इनहेरिट करने की ज़रूरत नहीं होगी:

class MySwitchState: SwipeableState()

class MySwitchState {
    private val anchoredDraggableState = AnchoredDraggableState(...)
}

अब आपका स्टेट होल्डर, SwipeableState से इनहेरिट नहीं होता है. इसलिए, आपको एपीआई खुद ही दिखाने पड़ सकते हैं. सबसे ज़्यादा इस्तेमाल किए जाने वाले एपीआई ये हैं: offset, progress, currentValue, और targetValue.

ऑफ़सेट ऐक्सेस करना

Swipeable में, AnchoredDraggableState के offset को शुरू करने से पहले Float.NaN किया जाता है. AnchoredDraggable में, ऐंकर को AnchoredDraggableState के कंस्ट्रक्टर को पास किया जा सकता है या AnchoredDraggableState#updateAnchors के ज़रिए अपडेट किया जा सकता है. ऐंकर को AnchoredDraggableState के कंस्ट्रक्टर में पास करने से, ऑफ़सेट तुरंत शुरू हो जाता है.

अगर आपके ऐंकर लेआउट पर निर्भर करते हैं या उनमें बदलाव हो सकता है, तो AnchoredDraggableState#updateAnchors का इस्तेमाल करें. इससे ऐंकर बदलने पर, स्थिति को फिर से बनाने से बचा जा सकता है.

updateAnchors का इस्तेमाल करने पर, ऐंकर को updateAnchors में पास करने से पहले ऑफ़सेट Float.NaN होगा. कंपोनेंट को गलती से Float.NaN पास करने से बचने के लिए, AnchoredDraggableState#requireOffset का इस्तेमाल करें. इससे यह ज़रूरी हो जाता है कि ऑफ़सेट को पढ़ते समय, उसे शुरू किया गया हो. इससे आपको गड़बड़ियों या संभावित बग का पता लगाने में मदद मिलती है.

@Composable
fun AnchoredDraggableBox() {
    val state = remember { AnchoredDraggableState(...) }
    val density = LocalDensity.current
    val anchors = remember { DraggableAnchors { ... } }
    SideEffect {
        state.updateAnchors(anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    }
}

Modifier.swipeable से Modifier.anchoredDraggable पर माइग्रेट करना

Modifier.anchoredDraggable(), Modifier.swipeable की जगह इस्तेमाल किया जाता है. Modifier.swipeable() के कुछ पैरामीटर सीधे AnchoredDraggableState में ट्रांसफ़र कर दिए गए हैं. इसके बारे में यहां बताया गया है.

ऐंकर तय करना

DraggableAnchors बिल्डर तरीके का इस्तेमाल करके, ऐंकर तय करें. इसके बाद, उन्हें AnchoredDraggableState#updateAnchors या AnchoredDraggableState के कंस्ट्रक्टर को पास करें:

enum class DragValue { Start, Center, End }

@Composable
fun AnchoredDraggableBox() {
    val anchors = DraggableAnchors {
        Start at -100.dp.toPx()
        Center at 0f
        End at 100.dp.toPx()
    }
    val state = remember {
        AnchoredDraggableState(anchors = anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    )
}

enum class DragValue { Start, Center, End }

@Composable
fun AnchoredDraggableBox() {
    val state = remember { AnchoredDraggableState(...) }
    val density = LocalDensity.current
    val anchors = with (density) {
        DraggableAnchors {
            Start at -100.dp.toPx()
            Center at 0f
            End at 100.dp.toPx()
        }
    }
    SideEffect {
        state.updateAnchors(anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    )
}

अगर ऐंकर स्टैटिक हैं, तो उन्हें कंस्ट्रक्टर को पास करें. अगर वे लेआउट पर निर्भर करते हैं या स्टैटिक नहीं हैं, तो updateAnchors का इस्तेमाल करें.

पोज़ीशनल थ्रेशोल्ड तय करना

थ्रेशोल्ड पैरामीटर का टाइप और नाम बदल गया है. अलग ThresholdConfig इंटरफ़ेस के बजाय, AnchoredDraggableState में positionalThreshold पैरामीटर होता है. यह थ्रेशोल्ड की पोज़िशन दिखाने वाले lambda फ़ंक्शन को लेता है. उदाहरण के लिए, 50% के पोज़िशनल थ्रेशोल्ड को इस तरह दिखाया जा सकता है:

val anchoredDraggableState = AnchoredDraggableState(
    positionalThreshold = { distance -> distance * 0.5f },
    ...
)

56dp के पोज़िशनल थ्रेशोल्ड को इस तरह दिखाया जा सकता है:

val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
    positionalThreshold = { with(density) { 56.dp.toPx() } },
    ...
)

वेलोसिटी थ्रेशोल्ड तय करना

वेलोसिटी थ्रेशोल्ड को AnchoredDraggableState के कंस्ट्रक्टर को भी पास किया जाता है. साथ ही, इसे लैम्डा के तौर पर भी दिखाया जाता है:

val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
    velocityThreshold = { with(density) { 125.dp.toPx() } },
    ...
)

एपीआई सरफ़ेस में बदलाव

एपीआई के बारे में यहां दी गई जानकारी में हुए बदलावों की खास जानकारी यहां दी गई है.

AnchoredDraggableState

Modifier.anchoredDraggable