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

Question

所以我在另一个盒子（边界）内有一个黑盒子（矩形），矩形设置为可拖动

但是现在我可以在整个窗口周围拖动矩形，但我希望如果矩形“离开”边界它应该消失在它后面。 我可以使用其他修饰符吗？

这里有一点上下文：

我的代码如下所示：

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")
            }
        }
    }

当我将矩形拖到边界外时，它看起来像这样：

但它应该更像这样：

Answer 1

在要剪辑其内容的可组合组件上，添加clipToBounds()修饰符。

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