Jetpack Compose如何在较小Composable内放置大尺寸可拖拽子组件

要实现的交互效果：

• 外层Box作为固定大小的可视容器
• 容器内部放置尺寸大于外层的内层Box
• 内层Box支持拖拽，仅在外层Box的可视区域内显示移动
  原有实现代码：

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

        val offsetX = remember { mutableStateOf(0f) }
        val offsetY = remember { mutableStateOf(0f) }

        Box(modifier = Modifier
            .offset(offsetX.value.dp, offsetY.value.dp)
            .size(600f.dp, 700f.dp)
            .background(Color.Blue) //DEBUG
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consumeAllChanges()
                    offsetX.value += dragAmount.x
                    offsetY.value += dragAmount.y
                }
            }
        ){
            //内层Box内容
        }

    }

内层Box实际渲染尺寸始终和外层一致，拖拽时能看到蓝色背景区域和外层Box一样大，代码里设置的600dp*700dp尺寸完全没生效，需要实现在更小的父Composable里放置大尺寸子Composable的效果。

Compose布局系统默认会给子元素传递强尺寸约束：父容器会限制子元素的最大宽高不能超过自身的可用尺寸。普通的size修饰符声明的尺寸如果超过父布局给出的最大允许值，会被直接压缩到父布局允许的上限，所以你写的600dp700dp被外层100dp100dp的最大约束覆盖，自然显示不出大尺寸效果。

把内层Box的size修饰符换成requiredSize就行。这个修饰符会直接忽略父布局传过来的尺寸约束，强制按照你指定的尺寸渲染组件，不受父容器大小限制。

注意点：

• 修饰符顺序不能乱，offset要放在尺寸、背景、手势事件修饰符前面，保证平移的是整个完整尺寸的内层Box
• 外层加的clipToBounds()是对的，会自动裁剪超出外层可视范围的内容，刚好符合视口显示的需求
  修复后的参考代码：

Box(modifier = Modifier
        .size(100.dp, 100.dp)
        .border(2.dp, Color.Black, RectangleShape)
        .clipToBounds()
    ){
        // 用mutableFloatStateOf比mutableStateOf(0f)的浮点值重组性能更好
        val offsetX = remember { mutableFloatStateOf(0f) }
        val offsetY = remember { mutableFloatStateOf(0f) }

        Box(modifier = Modifier
            // lambda版本offset性能更优，偏移变化不会触发整个修饰符链重组
            .offset { IntOffset(offsetX.value.roundToInt(), offsetY.value.roundToInt()) }
            // 用requiredSize替代普通size，忽略父布局尺寸约束
            .requiredSize(600.dp, 700.dp)
            .background(Color.Blue)
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consume()
                    // 可选：增加边界限制，避免内层Box被完全拖出可视区域
                    val maxDragX = -(600.dp.toPx() - 100.dp.toPx())
                    val maxDragY = -(700.dp.toPx() - 100.dp.toPx())
                    offsetX.value = (offsetX.value + dragAmount.x).coerceIn(maxDragX, 0f)
                    offsetY.value = (offsetY.value + dragAmount.y).coerceIn(maxDragY, 0f)
                }
            }
        ){
            // 内层Box业务内容
        }
    }

补充：代码里加的边界判断是可选优化，防止拖拽时把内层Box整个拖出外层视口；如果用的是新版本Compose，consumeAllChanges()已经废弃，替换成consume()即可。

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