Compose添加Modifier.verticalScroll后fillMaxSize失效问题

当你给根Column添加verticalScroll修饰符后，这个Column就变成了可滚动容器，它的布局逻辑会发生变化：可滚动容器不会给子元素提供固定的高度约束（因为它允许内容超出视口滚动），所以子元素的fillMaxSize无法获取到父容器的实际高度，只能自适应内容大小，这就是图片无法占满空间的核心原因。

你需要让ElevatedCard占据根Column的剩余可用空间，同时确保内部布局能正确填充高度，具体修改如下：

1. 给ElevatedCard添加Modifier.weight(1f)：让它占据根Column中除顶部文本之外的所有剩余空间（weight仅在Column/Row的直接子元素中生效）。
2. 给ElevatedCard内部的Column添加Modifier.fillMaxSize()：确保内部布局能填充整个Card的空间。
3. 给AsyncImage设置contentScale：控制图片如何适配容器大小，比如ContentScale.Crop或ContentScale.FillBounds，避免图片比例失调。

修改后的代码：

val viewModel: HomeScreenViewModel = viewModel()
val scrollState = rememberScrollState()

Column(
    modifier = Modifier.fillMaxSize().verticalScroll(scrollState)
) {
    Text(
        "Editor picks".uppercase(),
        style = MaterialTheme.typography.labelMedium,
        modifier = Modifier.padding(8.dp),
    )

    ElevatedCard(
        modifier = Modifier
            .clickable { }
            .weight(1f) // 占据剩余空间
            .fillMaxWidth()
    ) {
        Column(modifier = Modifier.fillMaxSize()) { // 填充Card的全部空间
            AsyncImage(
                viewModel.topVideo?.thumbnailSrc,
                contentDescription = null,
                modifier = Modifier.fillMaxSize(), // 填充内部Column的空间
                contentScale = ContentScale.Crop // 根据需求调整缩放模式
            )
        }
    }
}

• modifier顺序：weight和fillMaxWidth的顺序不影响功能，但逻辑上先确定宽度、再分配剩余高度更直观。
• 图片缩放选择：如果需要保持图片比例，ContentScale.Crop会裁剪多余部分；ContentScale.Fit会完整显示图片但可能留空白，可根据需求调整。

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