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

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

सामग्री के Swipeable API को फ़ाउंडेशन के AnchoredDraggable. इसे आने वाली रिलीज़ में हटा दिया जाएगा. यह गाइड में बताया गया है कि Swipeable एपीआई से AnchoredDraggable पर कैसे माइग्रेट किया जाता है.

SwipeableState को AnchoredDraggableState पर माइग्रेट करें

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

अपने स्टेट होल्डर को अपडेट करें

AnchoredDraggableState एक फ़ाइनल क्लास है. इसका मतलब है कि इसे इनहेरिट नहीं किया जा सकता से. अगर आपके मौजूदा कॉम्पोनेंट को SwipeableState से इनहेरिट किया गया है, तो अपडेट करें आपका स्टेट होल्डर, इसके बजाय 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 का इस्तेमाल करते हैं, तो YT को पास करने से पहले ऑफ़सेट Float.NaN होगा updateAnchors के लिए ऐंकर. गलती से 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.swipeable को Modifier.anchoredDraggable() से बदला जाएगा. कुछ सूचनाएं मिल रही हैं 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 का इस्तेमाल करें.

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

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

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

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

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

वेग की सीमाएं तय करना

वेलोसिटी थ्रेशोल्ड को AnchoredDraggableState के कंस्ट्रक्टर को भी पास किया जाता है, और इसे Lambda फ़ंक्शन के तौर पर भी दिखाया गया है:

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

एपीआई प्लैटफ़ॉर्म में होने वाले बदलाव

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

AnchoredDraggableState

Modifier.anchoredDraggable