Compose布局：子Box超出父Box边界且保持自身高度

要实现子Box超出父Box边界且保持自身尺寸，你需要调整子Box的Modifier，让它不受父Box的约束限制，结合对齐方式就能达到预期效果：

修改后的代码 #

val density = LocalDensity.current

Box(modifier = Modifier
    .padding(top = 250.dp)
    .fillMaxWidth()
    .height(20.dp)
    .background(Color.Red)
    .clipToBounds() // 保留该Modifier，裁剪超出父Box的内容
) {
    Box(
        modifier = Modifier
            .wrapContentSize(unbounded = true) // 关键：允许子Box突破父布局的约束
            .fillMaxWidth()
            .height(80.dp)
            .background(Color.Green)
            .align(Alignment.BottomCenter)
            .onSizeChanged {
                density.run {
                    Log.i("Box Height", it.height.toDp().toString())
                }
            }
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(5.dp)
                .background(Color.Cyan)
                .align(Alignment.TopCenter)
        )
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(5.dp)
                .background(Color.Yellow)
                .align(Alignment.BottomCenter)
        )
        Box(
            modifier = Modifier
                .fillMaxHeight()
                .width(5.dp)
                .background(Color.Magenta)
                .align(Alignment.CenterStart)
        )
        Box(
            modifier = Modifier
                .fillMaxHeight()
                .width(5.dp)
                .background(Color.Blue)
                .align(Alignment.CenterEnd)
        )
    }
}

关键说明 #

• wrapContentSize(unbounded = true)：这个Modifier会让子元素脱离父布局的尺寸约束，允许它按照自身设置的80.dp高度绘制，不会被压缩到父Box的20.dp高度。
• 保留父Box的clipToBounds()：子Box超出父Box的部分（顶部的青色线条）会被裁剪，父Box内部就看不到青色线条，符合你的预期。
• 结合align(Alignment.BottomCenter)：子Box的底部会和父Box的底部对齐，顶部自然超出父Box范围。

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