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

Модификатор 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.

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