Sürükleme, hızlıca kaydırma ve hızla kaydırma

draggable değiştirici, tek bir yönde sürükleme hareketlerine yönelik üst düzey giriş noktasıdır ve sürükleme mesafesini piksel cinsinden bildirir.

Bu değiştiricinin, yalnızca hareketi algılaması açısından scrollable ile benzer olduğunu belirtmek önemlidir. Durumu tutmanız ve örneğin öğeyi offset değiştirici aracılığıyla hareket ettirerek ekranda göstermeniz gerekir:

@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

Sürükleme hareketinin tamamını kontrol etmeniz gerekiyorsa sürükleme hareketini kullanmayı düşünün algılamak için hareket dedektörünü pointerInput kullanabilirsiniz.

@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

Kaydırma

İlgili içeriği oluşturmak için kullanılan swipeable değiştiricisi, serbest bırakıldıklarında normal öğelere giden öğeleri sürüklemenizi sağlar. bir yönde tanımlanan iki veya daha fazla sabitleme noktası. Bunun için yaygın olarak kullanılan bir yöntem, "reddetmek için kaydır" kalıbını uygulamaktır.

Dikkat: swipeable API'lerinin yerini Vakfın anchoredDraggable API'leri Jetpack Compose 1.6.0-alpha01'de kullanıma sunuldu.

Bu değiştiricinin öğeyi hareket ettirmediğini, yalnızca hareketi algılar. Eyaleti basılı tutmanız ve ekranda ne zaman temsil etmeniz gerektiğini örneğin, öğeyi offset kullanabilirsiniz.

Kaydırılabilir durum, swipeable değiştiricide gereklidir ve rememberSwipeableState() ile oluşturulup hatırlanabilir. Bu durum, sabit noktalara (snapTo, animateTo, performFling ve performDrag'ye bakın) programlı olarak animasyon uygulamak için yararlı yöntemler ve sürükleme işleminin ilerleme durumunu gözlemlemek için özellikler de sağlar.

Kaydırma hareketi, FixedThreshold(Dp) ve FractionalThreshold(Float) gibi farklı eşik türlerine sahip olacak şekilde yapılandırılabilir. Bu eşik türleri, her bir başlangıç ve bitiş noktası kombinasyonu için farklı olabilir.

Daha fazla esneklik için, sınırların ötesine kaydırırken resistance'ü ve ayrıca konumsal thresholds'ye ulaşılmamış olsa bile bir kaydırmayı sonraki duruma animasyonlu olarak uygulayacak velocityThreshold'ü yapılandırabilirsiniz.

@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