检测 Jetpack Compose 上的滑动方向答案

【问题标题】：Detect swipe direction on Jetpack Compose检测 Jetpack Compose 上的滑动方向
【发布时间】：2021-01-05 03:50:45
【问题描述】：

我正在尝试在 Compose 中检测滑动方向。我为此使用了可拖动的修饰符。但是draggable 只允许检测一个方向（垂直或水平）。我想检测所有方向（左、右、上、下）的滑动。谁能帮助我我该怎么做？谢谢！

【问题讨论】：

标签： android android-jetpack-compose android-jetpack-compose-gesture

【解决方案1】：

使用1.0.0，您可以使用pointerInput 修饰符通过detectDragGestures 函数控制拖动手势。

类似：

Box(modifier = Modifier.fillMaxSize()) {
    var offsetX by remember { mutableStateOf(0f) }
    var offsetY by remember { mutableStateOf(0f) }

    Box(
        Modifier
            .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
            .size(100.dp, 100.dp)
            .background(Color.Blue)
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consumeAllChanges()

                    val (x,y) = dragAmount
                    when {
                        x > 0 ->{ /* right */ }
                        x < 0 ->{ /* left */ }
                    }
                    when {
                        y > 0 -> { /* down */ }
                        y < 0 -> { /* up */ }
                    }

                    offsetX += dragAmount.x
                    offsetY += dragAmount.y
                }
            }
    )
}

【讨论】：

我发现我需要使用.value 访问可变状态偏移量来更新它们：offsetX.value += dragAmount.xoffsetY.value += dragAmount.y

【解决方案2】：

Modifier.dragGestureFilter 检测到任何方向的拖动。传递DragObserver 的实例并覆盖onDrag。在这里，您可以根据Offset 检测滑动方向。该对象具有x 和y 值，根据方向为正或负。

您的代码如下所示：

Box(
  Modifier.dragGestureFilter(
    dragObserver = object : DragObserver() {
      override fun onDrag(dragDistance: Offset): Offset {
        val (x, y) = dragDistance
        when {
          x > 0 -> { /* right */ }
          x < 0 -> { /* left */ }
        }
        when {
          y > 0 -> { /* down */ }
          y < 0 -> { /* up */ }
        }
      }
    }
  )
)

要实际移动对象，您必须将 Modifier.offset 与在 onDrag 中更新的值一起应用。

【讨论】：

非常感谢您的回答。
请注意“Modifier.dragGestureFilter 已被弃用。使用 Modifier.pointerInput { detectDragGestures (...)} 代替。或者，使用 Modifier.draggable 进行单轴拖动”(developer.android.com/jetpack/androidx/releases/…)跨度>