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

draggable değiştiricisi, hareketleri tek bir yönde sürüklemek için kullanılan ü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 işlevine benzer olduğunu unutmayın. Durumu muhafaza etmeniz ve ekranda temsil etmeniz gerekir. Örneğin, öğeyi offset değiştiricisi aracılığıyla hareket ettirerek:

@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 hareketini tamamen kontrol etmeniz gerekiyorsa bunun yerine pointerInput değiştiricisi aracılığıyla sürükleme hareketi algılayıcıyı 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

swipeable değiştiricisi, serbest bırakıldıklarında genellikle bir yönde tanımlanmış iki veya daha fazla sabitleme noktasına doğru canlandırılan öğeleri sürüklemenizi sağlar. Bunun yaygın bir kullanım şekli, "kapatmak için hızlıca kaydırma" kalıbıdır.

Bu değiştiricinin öğeyi hareket ettirmediğini, yalnızca hareketi algıladığını unutmayın. Durumu muhafaza etmeniz ve ekranda temsil etmeniz gerekir. Örneğin, öğeyi offset değiştiricisi aracılığıyla hareket ettirebilirsiniz.

Kaydırılabilir durum, swipeable değiştiricisinde zorunludur ve rememberSwipeableState() ile oluşturulup hatırlanabilir. Bu durum, çapaların programlı bir şekilde canlandırılması için bir dizi faydalı yöntem (bkz. snapTo, animateTo, performFling ve performDrag) ve sürüklemenin ilerleme durumunu gözlemlemek için gereken özellikler sağlar.

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

Daha fazla esneklik için sınırları kaydırırken resistance öğesini ve konumlandırma thresholds değerine ulaşılmamış olsa bile sonraki duruma kaydırma animasyonu yapacak velocityThreshold öğesini 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: Bağlantı metni JavaScript kapalıyken görüntülenir
• Hareketleri anlama
• Gelişmiş animasyon örneği: Hareketler {:#gesture-and-animation}
• Değere dayalı animasyonlar