Jetpack Compose 可在另一个可组合物中使用更大尺寸的可组合物

Question

so I want to have a Box as a window with another box in it which is bigger than the outermost Box. Then I want to have the inner Box draggable, so I can move it around inside the outermost box.

My Code looks like this:

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
                }
            }
        ){
            //Contents of inner box
        }

    }

The problem is now, that the inner box is that the inner box is still only as big as the outer box. So I can drag the inner box around but see that the background of the inner blue box is only as wide and high as the outer box.

Is there another modifier to use, wo enable bigger composables inside other smaller composables?

Answer 1

After a (long) bit of trying (I hate GUI...) here's my solution:

With .wrapContentSize(unbounded = true) set in the parent composable, the child composable can have a bigger size.

But make sure to set this modifier after .clipToBounds because otherwise the content won't clip as wished