Jetpack Compose中兄弟组件用weight时如何填充视图高度？

问题场景 #

我有一个嵌套Column布局，包含绿色方块（固定高度500dp，实际高度动态可变）和底部操作栏Column。需求如下：

• 当底部Column文本过多、空间不足时，绿色方块自动收缩（已通过Modifier.weight(1F, false)实现）；
• 当空间充足时，绿色方块完整显示，同时底部Column的Text与Button之间保留最大空隙，Button固定在底部。

尝试给Text和Button之间添加Spacer(Modifier.weight(1F))时，底部Column会无限膨胀，导致绿色方块被挤出屏幕。直接给底部Column设置weight会平分总空间，fillMaxHeight()也会出现同样问题，BoxWithConstraints因绿色方块高度动态无法使用。

解决方案 #

核心思路是让底部Column填充绿色方块占用后的剩余空间，同时通过内部的weight Spacer实现Text与Button的垂直分布。具体实现如下：

修改后的完整代码 #

@Composable
fun TestScreen() {
    Column(modifier = Modifier.fillMaxSize()) {
        GreenSquare(
            modifier = Modifier.weight(1F, false)
        )

        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.weight(1F, fill = true) // 关键修改
        ) {
            Text(
                text = "Some text Some text Some text Some text Some text Some text Some text Some text",
                fontSize = 24.sp,
                modifier = Modifier.padding(horizontal = 80.dp)
            )

            Spacer(modifier = Modifier.weight(1F))

            Button(onClick = { /*TODO*/ }) {
                Text("Button")
            }
        }
    }
}

@Composable
fun GreenSquare(modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(500.dp)
            .background(color = Color.Green)
    )
}

原理说明 #

1. 绿色方块的Modifier.weight(1F, false)：优先以自身固有高度（500dp）布局，当总空间不足时，会与底部Column按1:1的权重分配剩余空间，实现自动收缩的需求。
2. 底部Column的Modifier.weight(1F, fill = true)：在绿色方块占据固有高度后，填充剩余所有空间；fill = true确保底部Column完全填充分配到的空间，让内部的weight元素可以正常工作。
3. 内部Spacer的Modifier.weight(1F)：占用底部Column内Text和Button之外的全部垂直空间，自动将Button推到底部，实现Text与Button之间保留最大空隙的需求。

两种场景下的效果：

• 空间充足时：绿色方块完整显示500dp，底部Column填充剩余高度，Button固定在底部；
• 空间不足时：绿色方块自动收缩，底部Column优先保证自身内容（Text+Button）完整显示。

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