Jetpack Compose组件重叠32dp并填充全屏高度问题求助

需要让绿色Box与红色Box重叠32dp，同时绿色Box填满全部可用高度。原代码使用Column和offset modifier导致绿色Box底部出现空白。

原代码：

Column(Modifier.fillMaxSize()){
    Box(Modifier.fillMaxWidth().fillMaxHeight(0.3f).background(Color.Red))
    Box(
        Modifier.offset(y = (-32).dp).fillMaxSize()
            .clip(RoundedCornerShape(topStart = 32.dp, topEnd = 32.dp))
            .background(Color.Green)
        )
}

问题原因 #

Column是线性布局，第二个Box的可用空间仅为父容器剩余的70%高度。使用offset只是视觉上移动组件，不会改变其布局空间大小，因此往上偏移32dp后，底部会空出对应区域。

解决方案 #

改用Box作为父容器（层叠布局），让绿色Box占据整个父容器空间，再通过offset实现与红色Box的重叠。这样绿色Box的布局空间是100%父容器高度，偏移后底部不会留空白。

修正后的代码：

Box(Modifier.fillMaxSize()) {
    // 红色Box：占据顶部30%高度
    Box(
        Modifier
            .fillMaxWidth()
            .fillMaxHeight(0.3f)
            .background(Color.Red)
    )
    // 绿色Box：填满整个容器，向上偏移32dp实现重叠
    Box(
        Modifier
            .offset(y = (-32).dp)
            .fillMaxSize()
            .clip(RoundedCornerShape(topStart = 32.dp, topEnd = 32.dp))
            .background(Color.Green)
    )
}

替代方案（使用负padding实现相同效果） #

Box(Modifier.fillMaxSize()) {
    Box(Modifier.fillMaxWidth().fillMaxHeight(0.3f).background(Color.Red))
    Box(
        Modifier
            .padding(top = (-32).dp)
            .fillMaxSize()
            .clip(RoundedCornerShape(topStart = 32.dp, topEnd = 32.dp))
            .background(Color.Green)
    )
}

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