ড্র্যাগ, সোয়াইপ ও ফ্লিং

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
                    }
                }
        )
    }
}

আঙুল দিয়ে প্রেস করে টেনে আনা হচ্ছে এমন একটি UI এলিমেন্ট

সোয়াইপ করা

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)
        )
    }
}

সোয়াইপ জেসচারের উত্তর দেওয়া একটি UI এলিমেন্ট