Модификатор 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)
)
}
}
Пока рекомендаций нет.
Попытайтесь войти в свой аккаунт Google.