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

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

تم إيقاف واجهات برمجة التطبيقات Swipeable الخاصة بـ Material نهائيًا لصالح واجهات AnchoredDraggable الخاصة بـ Foundation، وستتم إزالتها في إصدار مستقبلي. يوضّح هذا الدليل كيفية نقل البيانات من واجهات برمجة التطبيقات 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