السحب والتمرير السريع والتنقّل السريع

يعدّ المُعدِّل draggable نقطة الدخول ذات المستوى العالي إلى إيماءات السحب في اتجاه واحد، ويُبلِغ عن مسافة السحب بالبكسل.

تجدر الإشارة إلى أنّ هذا المُعدِّل مشابه لـ scrollable، من حيث أنّه يرصد الإيماءة فقط. عليك الاحتفاظ بالحالة وعرضها على الشاشة ، على سبيل المثال، من خلال نقل العنصر باستخدام المُعدِّل offset:

@Composable
private fun DraggableText() {
    var offsetX by remember { mutableStateOf(0f) }
    Text(
        modifier = Modifier
            .offset { IntOffset(offsetX.roundToInt(), 0) }
            .draggable(
                orientation = Orientation.Horizontal,
                state = rememberDraggableState { delta ->
                    offsetX += delta
                }
            ),
        text = "Drag me!"
    )
}
GesturesSnippets.kt

إذا كنت بحاجة إلى التحكّم في إيماءة السحب بالكامل، ننصحك باستخدام ميزة رصد إيماءة السحب بدلاً من ذلك، من خلال المُعدِّل pointerInput.

@Composable
private fun DraggableTextLowLevel() {
    Box(modifier = Modifier.fillMaxSize()) {
        var offsetX by remember { mutableStateOf(0f) }
        var offsetY by remember { mutableStateOf(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
                    }
                }
        )
    }
}
GesturesSnippets.kt

عنصر واجهة مستخدم يتم سحبه من خلال الضغط على إصبع

التمرير السريع

يتيح لك المُعدِّل 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)
        )
    }
}
GesturesSnippets.kt

عنصر واجهة مستخدِم يستجيب لإيماءة التمرير السريع

السابق
صفحة مواضع التمرير
التالي
إيماءات اللمس المتعدد