Перетащите, проведите пальцем по экрану и бросьте

Модификатор draggable — это точка входа высокого уровня для перетаскивания жестов в одной ориентации и сообщает расстояние перетаскивания в пикселях.

Важно отметить, что этот модификатор похож на scrollable , поскольку он распознает только жест. Вам нужно сохранить состояние и представить его на экране, например, перемещая элемент с помощью модификатора 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

Если вам нужно контролировать весь жест перетаскивания, рассмотрите возможность использования детектора жестов перетаскивания с помощью модификатора 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

Пролистывание

Модификатор swipeable позволяет перетаскивать элементы, которые при отпускании анимируются, обычно к двум или более опорным точкам, определенным в ориентации. Обычно это используется для реализации шаблона «проведите пальцем по экрану, чтобы закрыть».

Внимание: в Jetpack Compose 1.6.0-alpha01 API-интерфейсы swipeable были заменены API-интерфейсами anchoredDraggable от Foundation.

Важно отметить, что этот модификатор не перемещает элемент, а только обнаруживает жест. Вам нужно удерживать состояние и представлять его на экране, например, перемещая элемент с помощью модификатора offset .

Состояние перелистывания требуется в модификаторе swipeable и может быть создано и запомнено с помощью rememberSwipeableState() . Это состояние также предоставляет набор полезных методов для программной анимации привязок (см. snapTo , animateTo , performFling и performDrag ), а также свойства для наблюдения за ходом перетаскивания.

Жест смахивания можно настроить для использования различных типов порогов, таких как FixedThreshold(Dp) и FractionalThreshold(Float) , и они могут быть разными для каждой комбинации точек привязки от-до.

Для большей гибкости вы можете настроить resistance при пролистывании за пределы границ, а также velocityThreshold , которая будет анимировать переход к следующему состоянию, даже если позиционные thresholds не были достигнуты.

@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

{% дословно %} {% дословно %}