Przeciąganie, przesuwanie i przesuwanie

Modyfikator draggable to punkt wejścia na wysokim poziomie do gestów przeciągania w jednej orientacji. Raportuje odległość przeciągania w pikselach.

Pamiętaj, że ten modyfikator jest podobny do scrollable, ponieważ wykrywa tylko gest. Musisz zachować stan i przedstawić go na ekranie, na przykład przesuwając element za pomocą modyfikatora offset:

@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

Jeśli chcesz kontrolować cały gest przeciągania, użyj zamiast tego modyfikatora pointerInput w detektorze gestów przeciągania.

@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

Przesuwanie

Modyfikator swipeable umożliwia przeciąganie elementów, które po zwolnieniu animują się w kierunku zazwyczaj 2 lub więcej punktów kotwiczenia zdefiniowanych w orientacji. Typowym zastosowaniem jest wdrożenie wzorca „przesuń, aby zamknąć”.

Pamiętaj, że ten modyfikator nie przemieszcza elementu, tylko wykrywa gest. Musisz utrzymać stan i przedstawić go na ekranie, na przykład przesuwając element za pomocą modyfikatora offset.

Stan, w którym można przesunąć element, jest wymagany w modyfikatorze swipeable. Można go utworzyć i zapamiętać za pomocą rememberSwipeableState(). Stan ten udostępnia też zestaw przydatnych metod do animowania elementów za pomocą kodu (patrz snapTo, animateTo, performFling i performDrag), a także właściwości do obserwowania postępu przeciągania.

Gest przesunięcia można skonfigurować tak, aby miał różne typy progów, np. FixedThreshold(Dp) i FractionalThreshold(Float). Mogą one być różne w przypadku każdej kombinacji „od” i „do” punktu zaczepienia.

Aby zwiększyć elastyczność, możesz skonfigurować resistance po przesunięciu poza granice oraz velocityThreshold, które spowoduje animację przesunięcia do następnego stanu, nawet jeśli nie osiągnięto pozycji 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)
        )
    }
}
GesturesSnippets.kt

Polecane dla Ciebie

• Uwaga: tekst linku jest wyświetlany, gdy obsługa JavaScript jest wyłączona
• Omówienie gestów
• Przykład zaawansowanej animacji: gesty {:#gesture-and-animation}
• Animacje na podstawie wartości