نقل البيانات من قابل للتمرير السريع إلى قابل للسحب الأساسي

Swipeable هي واجهة برمجة تطبيقات Compose Material تساعدك في إنشاء مكوّنات يمكن التمرير سريعًا بين حالات منفصلة، مثل الأوراق السفلية أو الأدراج أو ميزة "التمرير سريعًا للإغلاق". لتحسين حالات الاستخدام المتقدّمة، مثل نقاط الارتكاز التي تعتمد على حجم أحد المكوّنات، تم نشر عنصر بديل في Compose-Foundation 1.6.0-alpha01: AnchoredDraggable. AnchoredDraggable هي واجهة برمجة تطبيقات Foundation لإنشاء مكوّنات قابلة للسحب مع حالات ارتساء، مثل البطاقات السفلية أو الأدراج أو ميزة "التمرير سريعًا للإغلاق".

تم إيقاف واجهات برمجة التطبيقات Swipeable في Material نهائيًا لصالح AnchoredDraggable في Foundation، وستتم إزالتها في إصدار مستقبلي. يوضّح هذا الدليل كيفية نقل البيانات من واجهات برمجة التطبيقات Swipeable إلى AnchoredDraggable.

نقل البيانات من SwipeableState إلى AnchoredDraggableState

ابدأ بتحديد التغييرات التي تم إجراؤها على عنصر الاحتفاظ بالحالة. AnchoredDraggableState لا يمكن أن يرث من أي عنصر آخر، ويتم تمثيل الإزاحة على أنّها Float.NaN قبل تهيئتها.

تعديل عنصر الاحتفاظ بالحالة

AnchoredDraggableState هي فئة نهائية، ما يعني أنّه لا يمكن أن ترث منها أي فئة أخرى. إذا كان المكوّن الحالي يرث من SwipeableState، عدِّل عنصر الاحتفاظ بالحالة ليحتوي على إحالة إلى AnchoredDraggableState بدلاً من أن يرث منه:

‫Swipeable

class MySwitchState: SwipeableState()

‫AnchoredDraggable

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

بما أنّ عنصر الاحتفاظ بالحالة لم يعُد يرث من SwipeableState، قد يكون عليك عرض واجهات برمجة التطبيقات بنفسك. إنّ واجهات برمجة التطبيقات الأكثر شيوعًا التي يمكنك استخدامها هي offset وprogress وcurrentValue وtargetValue.

الوصول إلى الإزاحة

على عكس Swipeable، تكون AnchoredDraggableState في offset هي Float.NaN قبل تهيئتها. في AnchoredDraggable، يمكن تمرير نقاط الارتكاز إلى الدالة الإنشائية لـ AnchoredDraggableState أو تعديلها من خلال AnchoredDraggableState#updateAnchors. يؤدي تمرير نقاط الارتكاز إلى الدالة الإنشائية لـ AnchoredDraggableState إلى تهيئة الإزاحة على الفور.

إذا كانت نقاط الارتكاز تعتمد على التنسيق أو يمكن أن تتغيّر، استخدِم AnchoredDraggableState#updateAnchors لتجنُّب إعادة إنشاء الحالة عند تغيير نقاط الارتكاز.

في حال استخدام updateAnchors، ستكون الإزاحة هي 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.anchoredDraggable() يحلّ محلّ Modifier.swipeable. تم نقل بعض مَعلمات Modifier.swipeable() إلى AnchoredDraggableState مباشرةً، كما هو موضّح في الأقسام التالية.

تحديد نقاط الارتكاز

حدِّد نقاط الارتكاز باستخدام طريقة إنشاء DraggableAnchors. بعد ذلك، مرِّر ها إلى AnchoredDraggableState#updateAnchors أو AnchoredDraggableState's الدالة الإنشائية:

طريقة وضع التصميم

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

‫updateAnchors

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() } },
    ...
)

تغييرات في واجهة برمجة التطبيقات

في ما يلي نظرة عامة على التغييرات التي تم إجراؤها على واجهة برمجة التطبيقات.

AnchoredDraggableState

SwipeableState

AnchoredDraggableState

open class SwipeableState(initialValue: T, animationSpec: AnimationSpec = …, confirmStateChange: (T) -> Boolean = …)

class AnchoredDraggableState( initialValue: T, animationSpec: AnimationSpec = …, confirmValueChange: (T) -> Boolean = …, positionalThreshold: Density.(Float) -> Float = …, velocityThreshold: Dp = …)

offset: State

offset: Float
requireOffset()

progress: SwipeProgress

progress: Float [0f..1f]

currentValue: T

currentValue: T

targetValue: T

targetValue: T

direction: Float [-1f, 0f, 1f]

لا ينطبق

suspend animateTo(
targetValue: T,
anim: AnimationSpec = …)

suspend animateTo(
targetState: T,
velocity: Float =
lastVelocity)

suspend snapTo(targetValue: T)

suspend snapTo(targetValue: T)

performDrag(delta: Float)

dispatchRawDelta(delta: Float)

suspend performFling(velocity: Float)

suspend settle(velocity: Float)

isAnimationRunning: Boolean

isAnimationRunning: Boolean

lastVelocity: Float

Modifier.anchoredDraggable

Modifier.swipeable

Modifier.anchoredDraggable

state: SwipeableState

state: AnchoredDraggableState

anchors: Map

AnchoredDraggableState#updateAnchors
or

AnchoredDraggableState#constructor

orientation: Orientation

orientation: Orientation

enabled: Boolean = true

enabled: Boolean = true

reverseDirection: Boolean = false

reverseDirection: Boolean = false

interactionSource: MutableInteractionSource? = null

interactionSource: MutableInteractionSource? = null

thresholds: (from: T, to: T) -> ThresholdConfig = FixedThreshold(56.dp)

يتم تمريرها إلى الدالة الإنشائية لـ AnchoredDraggableState على أنّها positionalThreshold

resistance: ResistanceConfig? = …

هذه الميزة غير متاحة بعد. يمكنك الاطّلاع على أحدث المعلومات المتعلّقة بالحالة في b/288084801.

velocityThreshold: Dp = 125.dp

يتم تمريرها إلى الدالة الإنشائية لـ AnchoredDraggable