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
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
यह खाता अभी काम नहीं कर रहा है. इसकी मौजूदा स्थिति जानने के लिए, b/288084801 पर जाएं. |
|
|