Trascina, scorri e scorri

Il modificatore di draggable è il punto di ingresso di alto livello per trascinare i gesti in un singolo orientamento e riporta la distanza di trascinamento in pixel.

È importante notare che questo modificatore è simile a scrollable, in quanto rileva solo il gesto. Devi mantenere lo stato e rappresentarlo sullo schermo, ad esempio spostando l'elemento tramite il modificatore di 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

Se devi controllare l'intero gesto di trascinamento, valuta la possibilità di utilizzare il rilevatore del gesto di trascinamento tramite il modificatore di pointerInput.

@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

Scorrimento

Il modificatore di swipeable ti consente di trascinare gli elementi che, una volta rilasciati, si animano generalmente verso due o più punti di ancoraggio definiti in un orientamento. Un utilizzo comune di questa funzionalità è l'implementazione di un pattern di scorrimento per ignorare.

È importante notare che questo modificatore non sposta l'elemento, rileva solo il gesto. Devi mantenere lo stato e rappresentarlo sullo schermo, ad esempio spostando l'elemento tramite il modificatore di offset.

Lo stato a scorrimento è obbligatorio nel modificatore swipeable e può essere creato e ricordato con rememberSwipeableState(). Questo stato fornisce anche una serie di metodi utili per animare in modo programmatico gli ancoraggi (vedi snapTo, animateTo performFling e performDrag), nonché proprietà per osservare l'avanzamento del trascinamento.

Il gesto di scorrimento può essere configurato in modo da avere tipi di soglia diversi, come FixedThreshold(Dp) e FractionalThreshold(Float), e possono essere diversi per ogni combinazione di punto di ancoraggio.

Per una maggiore flessibilità, puoi configurare resistance quando scorri oltre i limiti e anche velocityThreshold che anima lo stato di scorrimento per passare allo stato successivo, anche se non è stato raggiunto il thresholdsposizionale.

@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

Consigliato per te

• Nota: il testo del link viene visualizzato quando JavaScript è disattivato
• Informazioni sui gesti
• Esempio di animazione avanzata: gesti {:#gesture-and-animation}
• Animazioni basate sul valore