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

İlgili içeriği oluşturmak için kullanılan draggable değiştirici, hareketleri tek bir yönde sürüklemek için üst düzey giriş noktasıdır. ve sürükleme mesafesini piksel cinsinden bildirir.

Bu düzenleyici, scrollable işlevine benzediğinden yalnızca hareketi algılar. Eyaleti korumanız ve ekranda temsil etmeniz gerekir Örneğin, öğeyi offset değiştirici:

@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 yaygın bir kullanımı "kaydırmak için kaydırma" kalıbı uygulamak için bir fırsat sunar.

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 oluşturulabilir ya da rememberSwipeableState() Bu durum, aynı zamanda programlı şekilde sabit reklamlar ( snapTo animateTo, performFling, ve performDrag) tıklayın. ve sürükleme ilerlemesini gözlemlemeyi sağlayan özelliklerdir.

Kaydırma hareketi, aşağıdakiler gibi farklı eşik türlerine sahip olacak şekilde yapılandırılabilir: FixedThreshold(Dp) ve FractionalThreshold(Float), ve her sabitleme noktası kombinasyonu için farklı olabilir.

Daha fazla esneklik için görünümü kaydırırken resistance yapılandırabilirsiniz. sınırları ve ayrıcavelocityThreshold thresholds değerine ulaşılmamış olsa bile bir sonraki durum için geri bildirim gönderebilirsiniz.

@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

ziyaret edin.