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

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

لقد تم إيقاف واجهات برمجة التطبيقات Swipeable للمواد لصالح شركة Foundation 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، يقع offset لـ AnchoredDraggableState قبل 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 الدالة الإنشائية:

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 التي تأخذ دالة lambda التي تُرجع موضع نقطة البداية. على سبيل المثال، يمكن التعبير عن الحد الأدنى لموضع الإعلان بنسبة 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