Faire glisser des éléments, les faire glisser et les faire glisser d'un geste vif

Le modificateur draggable est le point d'entrée de niveau supérieur des gestes de déplacement dans une orientation. Il indique également la distance de déplacement en pixels.

Notez que ce modificateur est semblable à scrollable, dans la mesure où il ne détecte que le geste. Vous devez conserver l'état et le représenter à l'écran, par exemple en déplaçant l'élément via le modificateur 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

Si vous devez contrôler l'ensemble du geste de déplacement, utilisez plutôt le détecteur de gestes de déplacement, avec le modificateur 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

Balayage

Le modificateur swipeable vous permet de faire glisser des éléments qui, une fois relâchés, s'animent généralement vers au moins deux points d'ancrage définis dans une orientation. Cette méthode est fréquemment utilisée pour implémenter un comportement de type "balayer pour fermer la vue".

Notez que ce modificateur ne déplace pas l'élément, il détecte seulement le geste. Vous devez conserver l'état et le représenter à l'écran, par exemple en déplaçant l'élément via le modificateur offset.

L'état de balayage est requis dans le modificateur swipeable. Il peut être créé et mémorisé avec rememberSwipeableState(). Cet état fournit également un ensemble de méthodes utiles pour animer de manière automatisée les ancrages (voir snapTo, animateTo, performFling et performDrag) ainsi que des propriétés pour observer la progression du déplacement.

Il est possible de configurer différents types de seuils pour le geste de balayage, par exemple FixedThreshold(Dp) et FractionalThreshold(Float), et de définir un type spécifique pour chaque combinaison de points d'ancrage de début et de fin.

Pour plus de flexibilité, vous pouvez configurer la resistance lorsque vous balayez l'écran au-delà des limites. Vous pouvez également définir la propriété velocityThreshold, qui animera un balayage jusqu'à l'état suivant, même si les thresholds de position ne sont pas atteints.

@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

Recommandations personnalisées

• Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
• Comprendre les gestes
• Exemple d'animation avancée: gestes {:#gesture-and-animation}
• Animations basées sur la valeur