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

اصلاح‌گر 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!"
    )
}

اگر نیاز دارید کل اشاره کشیدن را کنترل کنید، به‌جای آن از آشکارساز اشاره کشیدن ازطریق اصلاح‌کننده 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
                    }
                }
        )
    }
}

عنصر میانای کاربری که با فشار انگشت کشیده می‌شود

تند کشیدن

اصلاح‌گر 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)
        )
    }
}

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