Jetpack Compose如何限制可拖拽组件仅在指定边界内显示

给外层带边框的边界Box添加Modifier.clipToBounds()修饰符，即可实现子组件超出容器范围的部分自动裁剪隐藏的效果。

实现逻辑 #

Compose中容器默认不会裁剪绘制范围，子组件即使布局位置超出父容器边界，依然会完整显示在界面上。clipToBounds()修饰符会把父容器的绘制区域严格限制在自身尺寸边界内，所有越界的子组件内容都会被直接裁切，不会显示在容器外部，正好匹配需求。

修正后代码 #

MaterialTheme {
    Box(modifier = Modifier
        .size(500f.dp)
        .border(2f.dp, Color.Black, RectangleShape)
        // 新增边界裁剪修饰符
        .clipToBounds()
    ){
        Box(modifier = Modifier
            .offset { IntOffset(offsetX.roundToInt(), 0) }
            .draggable(
                orientation = Orientation.Horizontal,
                state = rememberDraggableState { delta ->
                    offsetX += delta
                    // 可选优化：限制拖拽偏移范围，避免蓝色方块完全拖出容器
                    offsetX = offsetX.coerceIn(0f, 400f)
                }
            )
            .background(Color.Blue)
            .size(100f.dp)
        ){
            Text("Hello")
        }
    }
}

可选优化说明：外层容器宽度为500dp，内部可拖拽方块宽度为100dp，因此方块水平偏移量的合法区间是0dp到400dp，用coerceIn限制偏移范围后，方块不会被完全拖到容器外，交互更符合常规拖拽组件的使用习惯。

内容的提问来源于stack exchange，提问作者c_phil