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!" ) }
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 } } ) } }
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 thresholds
posizionale.
@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) ) } }
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