The
draggable
মডিফায়ার হল একটি নির্দিষ্ট দিকে ড্র্যাগ জেসচার করার হাই-লেভেল এন্ট্রি পয়েন্ট,
এবং এটি পিক্সেলে ড্র্যাগ করার দূরত্ব রিপোর্ট করে।
এটি মনে রাখা গুরুত্বপূর্ণ যে এই মডিফায়ারটি scrollable-এর মতো, কারণ এটি
শুধুমাত্র জেসচার শনাক্ত করে। আপনাকে স্টেট হোল্ড করতে হবে এবং স্ক্রিনে তা দেখাতে হবে
যেমন, এলিমেন্টটি
offset
মডিফায়ারের মাধ্যমে সরিয়ে:
@Composable private fun DraggableText() { var offsetX by remember { mutableFloatStateOf(0f) } Text( modifier = Modifier .offset { IntOffset(offsetX.roundToInt(), 0) } .draggable( orientation = Orientation.Horizontal, state = rememberDraggableState { delta -> offsetX += delta } ), text = "Drag me!" ) }
আপনি যদি সম্পূর্ণ ড্র্যাগ জেসচার নিয়ন্ত্রণ করতে চান, তাহলে
pointerInput
মডিফায়ারের মাধ্যমে, ড্র্যাগ
জেসচার ডিটেক্টর ব্যবহার করার কথা বিবেচনা করুন।
@Composable private fun DraggableTextLowLevel() { Box(modifier = Modifier.fillMaxSize()) { var offsetX by remember { mutableFloatStateOf(0f) } var offsetY by remember { mutableFloatStateOf(0f) } Box( Modifier .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) } .background(Color.Blue) .size(50.dp) .pointerInput(Unit) { detectDragGestures { change, dragAmount -> change.consume() offsetX += dragAmount.x offsetY += dragAmount.y } } ) } }
সোয়াইপ করা
swipeable
মডিফায়ার আপনাকে এলিমেন্ট ড্র্যাগ করতে দেয়, যা রিলিজ করা হলে, সাধারণত
কোনও একটি ওরিয়েন্টেশনে নির্দিষ্ট করা দুটি বা তার বেশি অ্যাঙ্কর পয়েন্টের দিকে অ্যানিমেট হয়। এর একটি সাধারণ ব্যবহার হল
‘সোয়াইপ করে বাতিল করা’ প্যাটার্ন প্রয়োগ করা।
মনে রাখা গুরুত্বপূর্ণ যে এই মডিফায়ার এলিমেন্টকে সরায় না, এটি শুধুমাত্র
জেসচার শনাক্ত করে। আপনাকে স্টেট হোল্ড করতে হবে এবং স্ক্রিনে তা দেখাতে হবে,
যেমন, offset
মডিফায়ারের মাধ্যমে এলিমেন্ট সরানো।
swipeable মডিফায়ারে সোয়াইপ করার উপযুক্ত স্টেট প্রয়োজন এবং এটি
rememberSwipeableState()-এর সাহায্যে তৈরি ও মনে রাখা
যায়।
এই স্টেট, অ্যাঙ্করকে
প্রোগ্রামাটিক অ্যানিমেট করার জন্য
কয়েকটি উপযোগী পদ্ধতি (দেখুন
snapTo,
animateTo,
performFling,
এবং
performDrag)
প্রদান করে, সেইসাথে ড্র্যাগ করার প্রগ্রেস পর্যবেক্ষণ করার জন্য প্রপার্টিও প্রদান করে।
সোয়াইপ জেসচারকে বিভিন্ন থ্রেশহোল্ডের ধরন অনুযায়ী কনফিগার করা যেতে পারে, যেমন
FixedThreshold(Dp)
এবং
FractionalThreshold(Float),
এবং এগুলি প্রতিটি অ্যাঙ্কর পয়েন্টের জন্য আলাদা আলাদা হতে পারে।
আরও বেশি নমনীয়তার জন্য, আপনি resistance কনফিগার করতে পারেন যখন সোয়াইপ করে
বাউন্ডের বাইরে চলে যাওয়া হয় এবং এছাড়াও, velocityThreshold যা সোয়াইপ করে
পরবর্তী স্টেটে নিয়ে যাবে, এমনকি পজিশনাল thresholdsনা পৌঁছানো হলেও।
@OptIn(ExperimentalMaterialApi::class) @Composable private fun SwipeableSample() { val width = 96.dp val squareSize = 48.dp val swipeableState = rememberSwipeableState(0) val sizePx = with(LocalDensity.current) { squareSize.toPx() } val anchors = mapOf(0f to 0, sizePx to 1) // Maps anchor points (in px) to states Box( modifier = Modifier .width(width) .swipeable( state = swipeableState, anchors = anchors, thresholds = { _, _ -> FractionalThreshold(0.3f) }, orientation = Orientation.Horizontal ) .background(Color.LightGray) ) { Box( Modifier .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) } .size(squareSize) .background(Color.DarkGray) ) } }
আপনার জন্য সাজেস্ট করা হয়েছে
- মনে রাখবেন: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট দেখানো হয়
- জেসচার সম্পর্কে বুঝুন
- উন্নত অ্যানিমেশনের উদাহরণ: জেসচার {:#gesture-and-animation}
- ভ্যালু-ভিত্তিক অ্যানিমেশন