Jetpack Compose中VerticalScroll与fillMaxSize组合使用失效问题

问题原因 #

这是Compose可滚动容器的默认行为：只要容器添加了verticalScroll修饰符，垂直方向的高度约束就会变为无限大，毕竟滚动容器的核心作用就是容纳超出可视范围的长内容。
而fillMaxSize/fillMaxHeight这类修饰符的作用是填充满父布局提供的可用高度，当父布局高度是无限大时，这部分逻辑就会失效，自动变成包裹内容高度，也就出现了你看到的Column高度不足的问题。

解决方案 #

你只需要强制给Column设置最小高度等于Box的可视区域高度即可，推荐使用BoxWithConstraints获取父容器可视高度的通用方案，兼容所有Compose版本：

MyTheme {
    BoxWithConstraints(
        modifier = Modifier
            .fillMaxSize()
            .border(2.dp, Color.Green) //仅用于视觉效果标记
            .verticalScroll(rememberScrollState())
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .defaultMinSize(minHeight = maxHeight) // 强制最小高度等于Box的可视高度
                .padding(2.dp)
                .border(2.dp, Color.Red) //仅用于视觉效果标记
        ) {
            // 你的业务内容
        }
    }
}

效果说明 #

该方案可以同时满足两种场景的需求：

• 当Column内部内容高度小于Box可视高度时，Column会自动撑满整个Box的可视区域，符合你要的「全屏」效果
• 当Column内部内容高度超过Box可视高度时，Column会随内容自动撑开，Box的垂直滚动效果也能正常生效

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