Модификатор 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!" ) }
Если вам нужно контролировать весь жест перетаскивания, рассмотрите возможность использования детектора жестов перетаскивания с помощью модификатора 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 } } ) } }
Пролистывание
Модификатор swipeable
позволяет перетаскивать элементы, которые при отпускании анимируются, обычно к двум или более опорным точкам, определенным в ориентации. Обычно это используется для реализации шаблона «проведите пальцем по экрану, чтобы закрыть».
Важно отметить, что этот модификатор не перемещает элемент, а только обнаруживает жест. Вам нужно удерживать состояние и представлять его на экране, например, перемещая элемент с помощью модификатора 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) ) } }
Рекомендуется для вас
- Примечание. Текст ссылки отображается, когда JavaScript отключен.
- Понимание жестов
- Пример расширенной анимации: Жесты {:#gesture-and-animation}
- Анимация на основе значений