使用 Jetpack Compose 仅​​在给定边界内拖动 Composable

Question

so I have a black box (rectangle) inside another box (boundary) and the rectangle is set as draggable

But now I can drag the rectangle around the whole window, but I want that if the rectangle "leaves" the boundary it should disappear behind it. Is there another modifier I can use for it?

Here a bit context:

My code looks like this:

MaterialTheme {
        Box(modifier = Modifier
            .size(500f.dp)
            .border(2f.dp, Color.Black, RectangleShape)
        ){
            Box(modifier = Modifier
                .offset { IntOffset(offsetX.roundToInt(), 0) }
                .draggable(
                    orientation = Orientation.Horizontal,
                    state = rememberDraggableState { delta ->
                        offsetX += delta
                    }
                )
                .background(Color.Blue)
                .size(100f.dp)
            ){
                Text("Hello")
            }
        }
    }

When I drag the rectangle outside the boundary it looks like this:

But it should more like this:

Answer 1

On the composable whose contents you want to clip add the clipToBounds() modifier.

Box(modifier = Modifier
    .size(500f.dp)
    .border(2f.dp, Color.Black, RectangleShape)
    .clipToBounds()
)