使用 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()
)