स्वाइप करने की सुविधा से 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