android 使用Jetpack Compose在父框内拖动视图

brtdzjyr 于 2023-09-28 发布在 Android

关注(0)|答案(1)|浏览(107)

我是新的Jetpack组成，请帮助我找到一个解决我的问题。
我试图添加一个拖动视图，使用jetpack的拖动视图成功实现，但当我拖动视图时，当拖动的视图接触或父框边界的相同位置时，视图消失或剪辑。
我想要的-拖动的视图应该显示在父视图内部，并捕捉到边框，而不是离开父视图，但它也不应该被剪裁。

What I Got - Dragged视图被剪切
请查看此视频以了解更多说明-Video
已检查并尝试此解决方案
我的代码：

Box(modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
            .onGloballyPositioned { coordinates ->
                parentViewHeight = coordinates.size.height
                parentViewWidth = coordinates.size.width
            }
            .clipToBounds()
            .background(color = Color.Gray))
        {
            // Draggable point 1
            Surface(
                modifier = Modifier
                    .size(50.dp)
                    .offset {
                        IntOffset(
                            startPointForConnection1.x.toInt(),
                            startPointForConnection1.y.toInt()
                        )
                    }
                    .pointerInput(Unit) {
                        detectTransformGestures { centroid, pan, zoom, rotation ->
                            startPointForConnection1 = Offset(
                                startPointForConnection1.x + pan.x,
                                startPointForConnection1.y + pan.y
                            )
                            /*  val newOffset = Offset(
                                  startPointForConnection1.x + pan.x,
                                  startPointForConnection1.y + pan.y
                              )

                              var maxX = size.width - parentViewWidth.dp.toPx()
                              var maxY = size.height - parentViewHeight.dp.toPx()

                              if(maxX <0){
                                  maxX = newOffset.x
                              }
                              if(maxY <0){
                                  maxY = newOffset.y
                              }
                              startPointForConnection1 = Offset(
                                  newOffset.x.coerceIn(0f, maxX),
                                  newOffset.y.coerceIn(0f, maxY))*/

                        }
                    },
                shape = CircleShape,
                color = Color.Red,
            ) {
                // Content of the draggable point
            }

        }

android

来源：https://stackoverflow.com/questions/77193259/drag-a-view-inside-parent-box-using-jetpack-compose

1条答案

按热度按时间

bkhjykvo1#

你需要做的是限制x，当你在pointerInput中分配新的Offset时，你可以拖动红色的圆圈。

.pointerInput(Unit) {
    detectDragGestures { _, dragAmount ->
        val summed = offset + dragAmount
        offset = Offset(
            x = summed.x.coerceIn(0f, parentWidthPx - circleDiameterPx),
            y = summed.y.coerceIn(0f, parentHeightPx - circleDiameterPx)
        )
    }
}

完全实现detactDragGestures和detectTransformGestures

@Preview
@Composable
private fun BoxDragSample() {

    BoxWithConstraints(
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
            .clipToBounds()
            .background(color = Color.Gray),
    )
    {
        val parentWidthPx = constraints.maxWidth
        val parentHeightPx = constraints.maxHeight

        val circleDiameter = 50.dp
        val circleDiameterPx = LocalDensity.current.run { circleDiameter.toPx() }

        val startX = LocalDensity.current.run { 150.dp.toPx() }
        val startY = LocalDensity.current.run { 50.dp.toPx() }

        var offset by remember {
            mutableStateOf(
                // You can change this position as required
                Offset(startX, startY)
            )
        }

        Surface(
            modifier = Modifier
                .size(circleDiameter)
                .offset {
                    offset.round()
                }
                // Alternative 1
                .pointerInput(Unit) {
                    detectTransformGestures { centroid, pan, zoom, rotation ->
                        val summed = offset + pan
                        offset = Offset(
                            x = summed.x.coerceIn(0f, parentWidthPx - circleDiameterPx),
                            y = summed.y.coerceIn(0f, parentHeightPx - circleDiameterPx)
                        )
                    }
                },
            // Alternative 2
//                .pointerInput(Unit) {
//                    detectDragGestures { _, dragAmount ->
//                        val summed = offset + dragAmount
//                        offset = Offset(
//                            x = summed.x.coerceIn(0f, parentWidthPx - circleDiameterPx),
//                            y = summed.y.coerceIn(0f, parentHeightPx - circleDiameterPx)
//                        )
//                    }
//                }
            shape = CircleShape,
            color = Color.Red,
        ) {
            // Content of the draggable point
        }
    }
}

赞(0）回复(0）举报 2023-09-28

我来回答

android 使用Jetpack Compose在父框内拖动视图

1条答案

相关问题

热门标签

最新问答