Swipeable থেকে AnchoredDraggable-এ স্থানান্তর করুন

Swipeable হল একটি কম্পোজ ম্যাটেরিয়াল এপিআই যা আপনাকে এমন উপাদান তৈরি করতে সাহায্য করে যা বিচ্ছিন্ন অবস্থার মধ্যে সোয়াইপ করা যায়, যেমন নীচের শীট, ড্রয়ার বা সোয়াইপ-টু-খারিজ। উন্নত ব্যবহারের ক্ষেত্রে আরও ভালভাবে সমর্থন করার জন্য, যেমন অ্যাঙ্করগুলি যেগুলি একটি উপাদানের আকারের উপর নির্ভর করে, একটি উত্তরসূরী Compose-Foundation 1.6.0-alpha01: AnchoredDraggable এ প্রকাশিত হয়েছিল। AnchoredDraggable হল একটি ফাউন্ডেশন এপিআই যা নোঙরযুক্ত অবস্থার সাথে টেনে আনা যায় এমন উপাদান তৈরি করার জন্য, যেমন নীচের শীট, ড্রয়ার বা সোয়াইপ-টু-খারিজ।

ফাউন্ডেশনের AnchoredDraggable পক্ষে উপাদানের Swipeable APIগুলিকে অবমূল্যায়ন করা হয়েছে এবং ভবিষ্যতে রিলিজে সরিয়ে দেওয়া হবে। এই নির্দেশিকা বর্ণনা করে কিভাবে Swipeable API থেকে AnchoredDraggable এ স্থানান্তর করা যায়।

SwipeableState AnchoredDraggableState এ স্থানান্তর করুন

আপনার রাজ্য ধারক পরিবর্তন সনাক্ত করে শুরু করুন. AnchoredDraggableState থেকে উত্তরাধিকারসূত্রে প্রাপ্ত করা যায় না, এবং অফসেটটি শুরু হওয়ার আগে Float.NaN হিসাবে উপস্থাপন করা হয়।

আপনার রাষ্ট্র ধারক আপডেট

AnchoredDraggableState একটি চূড়ান্ত শ্রেণী, যার অর্থ এটি থেকে উত্তরাধিকারসূত্রে পাওয়া যাবে না। যদি আপনার বিদ্যমান উপাদানটি SwipeableState থেকে উত্তরাধিকারসূত্রে প্রাপ্ত হয়, তাহলে আপনার রাজ্য ধারককে এটি থেকে উত্তরাধিকার না করে AnchoredDraggableState এর একটি রেফারেন্স ধরে রাখতে আপডেট করুন:

class MySwitchState: SwipeableState()

class MySwitchState {
    private val anchoredDraggableState = AnchoredDraggableState(...)
}

যেহেতু আপনার স্টেট হোল্ডার আর SwipeableState থেকে উত্তরাধিকারী হয় না, তাই আপনাকে হয়তো APIs প্রকাশ করতে হবে। আপনি ব্যবহার করতে পারেন এমন সবচেয়ে সাধারণ APIগুলি হল offset , progress , currentValue এবং targetValue ।

অফসেট অ্যাক্সেস করুন

Swipeable বিপরীতে, AnchoredDraggableState এর offset হল Float.NaN শুরু হওয়ার আগে। AnchoredDraggable এ, অ্যাঙ্করগুলি AnchoredDraggableState এর কনস্ট্রাক্টরের কাছে পাঠানো যেতে পারে বা AnchoredDraggableState#updateAnchors মাধ্যমে আপডেট করা যেতে পারে। AnchoredDraggableState এর কনস্ট্রাক্টরের কাছে অ্যাঙ্করগুলি পাস করা হলে অফসেটটি অবিলম্বে শুরু হয়।

যদি আপনার অ্যাঙ্করগুলি লেআউটের উপর নির্ভর করে বা পরিবর্তন করতে পারে, অ্যাঙ্করগুলি পরিবর্তন করার সময় রাষ্ট্রটি পুনরায় তৈরি করা এড়াতে AnchoredDraggableState#updateAnchors ব্যবহার করুন।

আপনি যদি updateAnchors ব্যবহার করেন, তাহলে অ্যাঙ্করগুলিকে updateAnchors করার আগে অফসেট Float.NaN হবে। ঘটনাক্রমে 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.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 প্যারামিটার রয়েছে যা একটি ল্যাম্বডা ফাংশন নেয় যা থ্রেশহোল্ডের অবস্থান ফিরিয়ে দেয়। উদাহরণস্বরূপ, 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() } },
    ...
)

API পৃষ্ঠের পরিবর্তন

নীচে API পৃষ্ঠের পরিবর্তনগুলির একটি ওভারভিউ খুঁজুন।

AnchoredDraggableState

Modifier.anchoredDraggable