Ziehen, wischen und schleppen

Der Modifikator draggable ist der übergeordnete Einstiegspunkt für Ziegestreiche in einer einzigen Ausrichtung und gibt den Ziehweg in Pixeln an.

Dieser Modifikator ähnelt scrollable, da er nur die Geste erkennt. Sie müssen den Status beibehalten und auf dem Bildschirm darstellen, indem Sie das Element beispielsweise über den Modifikator offset bewegen:

@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

Wenn Sie die gesamte Ziegestensteuerung benötigen, können Sie stattdessen den Ziegesten-Erkennungsmechanismus über den Modifikator pointerInput verwenden.

@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

Ein UI-Element, das durch Drücken des Fingers verschoben wird

Wischen

Mit dem Modifikator swipeable können Sie Elemente ziehen, die sich nach dem Loslassen in der Regel zu zwei oder mehr in einer bestimmten Ausrichtung definierten Ankerpunkten animieren. Eine häufige Verwendung um ein Muster durch Wischen zum Schließen zu implementieren.

Mit diesem Modifikator wird das Element nicht verschoben, sondern nur die Geste erkennt. Sie müssen den Zustand halten und ihn auf dem Bildschirm darstellen, indem Sie Wenn Sie z. B. das Element über die offset Modifikator.

Der wischbare Zustand ist im swipeable-Modifikator erforderlich und kann erstellt werden und gespeichert werden, rememberSwipeableState() Dieser Status bietet auch eine Reihe nützlicher Methoden, um Anker programmatisch zu animieren (siehe snapTo, animateTo, performFling und performDrag) sowie Eigenschaften, um den Fortschritt des Ziehens zu beobachten.

Die Wischgeste kann mit verschiedenen Schwellenwerttypen konfiguriert werden, z. B. FixedThreshold(Dp) und FractionalThreshold(Float), und können für die einzelnen Kombinationen unterschiedlich sein.

Für mehr Flexibilität können Sie die resistance konfigurieren, wenn Sie über die Grenzen wischen, und auch die velocityThreshold, die ein Wischen zum nächsten Status animiert, auch wenn die thresholds für die Position nicht erreicht wurden.

@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

Ein UI-Element, das auf eine Wischgeste reagiert

Zurück
Scrollen
Weiter
Multi-Touch-Gesten