Ziehen, wischen und schleppen

Die draggable ist der übergeordnete Einstiegspunkt zum Verschieben von Gesten in einer einzigen Ausrichtung. und meldet den Ziehabstand in Pixeln.

Dieser Modifizierer ähnelt scrollable insofern, als er erkennt nur die Geste. Sie müssen den Status gedrückt halten und auf dem Bildschirm darstellen indem Sie z. B. das Element über die offset Modifikator:

@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 Ziehbewegung steuern möchten, verwenden Sie am besten die Ziehbewegung können Sie über die Schaltfläche pointerInput Modifikator.

@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 einen Fingerdrücken gezogen wird

Wischen

Die swipeable können Sie Elemente ziehen, die normalerweise zu Zwei oder mehr Ankerpunkte, die in einer Ausrichtung definiert sind. Eine häufige Verwendung um ein Muster durch Wischen zum Schließen zu implementieren.

Dieser Modifizierer verschiebt das Element nicht, sondern verschiebt 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 zur programmatischen Animation zu Anker (siehe snapTo, animateTo, performFling, und performDrag) sowie Eigenschaften zur Beobachtung des Ziehfortschritts.

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 kannst du resistance konfigurieren, wenn du über das und das velocityThreshold-Element, das einen Wisch nach dem nächsten Zustand zurück, auch wenn die Position thresholds noch nicht erreicht wurde.

@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