کشیدن، تند کشیدن، و پرت کردن

اصلاح کننده draggable نقطه ورود سطح بالا برای کشیدن ژست ها در یک جهت است و فاصله کشیدن را به پیکسل گزارش می کند.

مهم است که توجه داشته باشید که این اصلاح کننده شبیه به scrollable است، زیرا فقط ژست را تشخیص می دهد. شما باید حالت را نگه دارید و با حرکت دادن عنصر از طریق اصلاح کننده offset ، آن را روی صفحه نمایش دهید: 

@Composable
private fun DraggableText() {
    var offsetX by remember { mutableFloatStateOf(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 { mutableFloatStateOf(0f) }
        var offsetY by remember { mutableFloatStateOf(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 به شما امکان می‌دهد عناصری را بکشید که وقتی آزاد می‌شوند، معمولاً به سمت دو یا چند نقطه لنگر تعریف شده در یک جهت حرکت می‌کنند. یکی از کاربردهای رایج برای این کار، پیاده‌سازی الگوی 'swipe-to-dismiss' است.

توجه به این نکته مهم است که این اصلاح کننده عنصر را حرکت نمی دهد، فقط ژست را تشخیص می دهد. شما باید حالت را نگه دارید و با حرکت دادن عنصر از طریق اصلاح کننده offset ، آن را روی صفحه نمایش دهید.

حالت swipeable در اصلاح‌کننده 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

یک عنصر رابط کاربری که به حرکت تند کشیدن پاسخ می‌دهد

{% کلمه به کلمه %} {% آخر کلمه %} {% کلمه به کلمه %} {% آخر کلمه %}
قبلی
اسکرول، اسکرول
بعدی
حرکات چند لمسی