Android 如何使可拖动内容停留在可组合框的边界内

要将可拖动内容保持在父布局边界内，可拖动内容本身的偏移量必须在布局边界内的范围内.

可以使用应用于父布局的onPlaced修改器来获取边界.此修改器提供布局放置后及其子布局之前的坐标.这允许子代根据父代的位置调整自己的位置.

// The size of the parent layout used later on to determine the
// offset of the draggable content inside the parent boundaries.

var parentSize by remember { mutableStateOf(Size.Zero) }

Box(
    modifier = Modifier
        .height(200.dp)
        .width(300.dp)
        .background(Color.LightGray)
        .onPlaced { layoutCoordinates ->

            // Set the [parentSize] to the size
            // of the layout in the local coordinates space.

            parentSize = layoutCoordinates.size.toSize()

        }
) ...

将可拖动内容保持在父布局边界内的一个示例是将offsetX和offsetY的值保持在相应边界内的范围内.

var draggableContentSize by remember { mutableStateOf(Size.Zero) }
var offsetX by remember { mutableFloatStateOf(0f) }
var offsetY by remember { mutableFloatStateOf(0f) }

Box(
    modifier = Modifier
        .onPlaced { draggableContentSize = it.size.toSize() }
        .offset { IntOffset(x = offsetX.roundToInt(), y = offsetY.roundToInt()) }
        .background(Color.Blue)
        .size(50.dp)
        .pointerInput(Unit) {
            detectDragGestures { change, dragAmount ->
                change.consume()

                // Keep the [offsetX] value inside the parent
                // width boundary by allowing it be in a range between
                // 0 and the parent width - draggableContentSize width.

                offsetX = (offsetX + dragAmount.x).coerceIn(
                    minimumValue = 0f,
                    maximumValue = parentSize.width - draggableContentSize.width
                )

                // Keep the [offsetY] value inside the parent
                // height boundary by allowing it be in a range between
                // 0 and the parent height - draggableContentSize height.

                offsetY = (offsetY + dragAmount.y).coerceIn(
                    minimumValue = 0f, 
                    maximumValue = parentSize.height - draggableContentSize.height
                )

            }
        }
)

以下是该示例的可视化演示.

编码快乐！