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 raporlar.

Bu değiştiricinin, yalnızca hareketi algılaması açısından scrollable ile benzer olduğunu belirtmek önemlidir. Durumu korumanı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 pointerInput değiştiricisi aracılığıyla sürükleme hareketi algılayıcıyı kullanmayı düşünebilirsiniz.

@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

swipeable değiştirici, serbest bırakıldığında genellikle bir yönde tanımlanan iki veya daha fazla ankraj noktasına doğru animasyonlu hareket eden öğeleri sürüklemenize olanak tanır. Bunun için yaygın olarak kullanılan bir yöntem, "reddetmek için kaydır" kalıbını uygulamaktır.

Bu değiştiricinin öğeyi taşımadığını, yalnızca hareketi algıladığını unutmayın. Durumu tutmanız ve örneğin öğeyi offset değiştirici aracılığıyla hareket ettirerek ekranda göstermeniz gerekir.

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) programatik 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

Sizin için önerilenler

• Not: JavaScript kapalıyken bağlantı metni gösterilir
• Hareketleri anlama
• Gelişmiş animasyon örneği: Hareketler {:#gesture-and-animation}
• Değere dayalı animasyonlar