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

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

Foundation के AnchoredDraggable के पक्ष में, Material के Swipeable एपीआई को बंद कर दिया गया है. साथ ही, आने वाले समय में इसे हटा दिया जाएगा. इस गाइड में, 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 का इस्तेमाल करने पर, ऐंकर को updateAnchors में पास करने से पहले ऑफ़सेट Float.NaN होगा. AnchoredDraggableState#requireOffset का इस्तेमाल करके, घटकों को Float.NaN को गलती से पास करने से रोकें. इससे, घटक को पढ़ते समय ऑफ़सेट को शुरू करने की ज़रूरत होती है. इससे, आपको शुरू में ही गड़बड़ियों या संभावित गड़बड़ियों का पता चल जाता है.

@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