标签: android-jetpack-compose-gesture

我们需要能够在长按 Jetpack Compose 中的同一组件后检测到点击和拖动手势。

要检测点击，我们可以这样做：

Modifier.pointerInput(graphData) {
    detectTapGestures(
        ...
    )
}

并检测长按后的拖动手势：

Modifier.pointerInput(graphData) {
    detectDragGesturesAfterLongPress(
        ...
    )
}

但不可能同时使用两者，因为第一个detect*将消耗指针事件：

Modifier.pointerInput(graphData) {
    detectTapGestures(
        ...
    )
    detectDragGesturesAfterLongPress(
        ...
    )
}

是否有可能以更方便的方式实现这一点，然后滚动我们自己的自定义函数来复制 detectorDragGesturesAfterLongPress 中的大部分代码？

我想要一个包含行列的框，其中填充了更多子项，这些子项接受单击（“CL”）和长按（“LO”）以进行缩放和拖动。使用pointerInputwithdetectTransforgestures我可以根据需要改变子布局。

var zoom by remember { mutableStateOf(1f) }
var offset by remember { mutableStateOf(Offset.Zero) }

val outer = (1..60).toList().chunked(6)

Box(Modifier
.fillMaxSize()
.pointerInput(Unit) {

    //zoom in/out and move around
    detectTransformGestures { gestureCentroid, gesturePan, gestureZoom, _ ->
        val oldScale = zoom
        val newScale = (zoom * gestureZoom).coerceIn(0.5f..5f)
        offset =
            (offset + gestureCentroid / oldScale) - (gestureCentroid / newScale + gesturePan / oldScale)
        zoom = newScale
    }
}) {

    Box(
        Modifier

            .graphicsLayer {
                translationX = -offset.x * zoom
                translationY …

Modifier.graphicsLayer{}这与使用旋转或平移图像不同。我想要在屏幕上移动、旋转和缩放可组合项，而不是在固定位置。

我想要实现的目标如下图所示

Modifier.graphicsLayer{}和的顺序Modifier.pointerInput()很重要。如果Modifier.pointerInput()放置在Modifier.graphicsLayer{}Composable 的触摸区域缩放、平移和旋转之后。

@Composable
private fun Test() {

    var offsetLeft by remember { mutableStateOf(Offset.Zero) }
    var offsetRight by remember { mutableStateOf(Offset.Zero) }

    var rotationLeft by remember { mutableStateOf(0f) }
    var rotationRight by remember { mutableStateOf(0f) }

    val modifierLeft = Modifier
        .border(3.dp, Color.Red)
        .graphicsLayer {
            translationX = offsetLeft.x
            translationY = offsetLeft.y
            rotationZ = rotationLeft
        }
        .border(2.dp, Color.Green)
        .pointerInput(Unit) {
            detectTransformGestures { centroid, pan, zoom, rotation ->
                offsetLeft += pan
                rotationLeft += rotation …

我有一个按钮，我希望它仅在长按时执行操作。

我已经能够通过长按来执行操作了。问题是：一旦用户不再按下按钮，我不知道如何停止它。

我该如何实施这样的事情？

我在 Android 应用程序上使用 Jetpack Compose。

如何在 Compose 中限制图像平移到框的边缘？

我用来pointerInput(Unit) { detectTransformGestures { centroid, pan, zoom, rotation -> }}控制缩放和平移。

当图像最小化为 时，我正在解决这个平移1f问题if (scale.value == 1f) 0f else panOffsetX。我想对放大的图像执行相同的操作（1f <scale <= 3f）

Box(
    modifier = Modifier
        .clip(RectangleShape)
        .fillMaxWidth()
        .background(Color.Gray)
        .pointerInput(Unit) {
            detectTransformGestures { centroid, pan, zoom, rotation ->
                val constraintZoom = when {
                    scale.value > 3f -> 3f
                    scale.value < 1f -> 1f
                    else -> (scale.value * zoom)
                }
                scale.value = constraintZoom
                panOffset += pan
                panOffsetX += pan.x
                panOffsetY += pan.y
                centroidOffset …

我试图有一个带有一些尾随文本的复选框。这个想法是，无论您选择复选框本身还是文本，值都会被切换。为了代码的简洁性，我已经在可组合项中完成了所有操作。

选择文本时它会按预期工作。但是当我专门按下该复选框时，什么也没有发生。我看到按下复选框会产生连锁反应，但它显然忽略了该行的可点击功能并点击onCheckChange = {}

我对可组合作用域并不完全熟悉，所以我认为这可能是由于它Row()是一个内联函数，所以我尝试对 the 应用相同的修饰符，Surface但这也不起作用。

从两个地点打同样的电话没什么大不了的，我只是想知道为什么。

@Composable
fun CheckboxInRowWithText() {
    var checkedState by remember { mutableStateOf(false) }
    Surface {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .clickable {
                    checkedState = !checkedState
                },
            verticalAlignment = Alignment.CenterVertically) {
            Checkbox(checked = checkedState, onCheckedChange = {} )

            Text(text = "Clicking this Row will toggle checkbox")
        }
    }
}

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