Kotlin Compose中无法修改AsyncImage高度该如何解决？

我尝试调整AsyncImage的尺寸，但无论怎么设置都无法达到预期效果。我期望AsyncImage能占满蓝色Box区域，相关代码如下：

Box(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Blue)
) {
    AsyncImage(
        modifier = Modifier
            .fillMaxWidth()
            .height(350.dp),
        model = state.mainItems?.image,
        contentDescription = null
    )

    Column(
        modifier = Modifier.fillMaxWidth()
    ){
          Text(text = "TITLE")
          Text(text = "CATEGORY DATE")
    }
}

效果截图：

问题出在两个核心点：

1. AsyncImage默认缩放模式不填满容器：Jetpack Compose里AsyncImage默认用ContentScale.Fit模式，会保持图片原有宽高比，只在容器内显示完整图，不会拉伸或裁剪填满容器。
2. Box的高度未明确约束：你的Box仅设置了fillMaxWidth，没有固定高度，虽然AsyncImage设了350dp高度，但Box高度会自适应内部内容，若图片比例和容器不匹配，就会出现背景留白。

调整后的代码：

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(350.dp) // 给Box设置和AsyncImage一致的高度，固定背景区域尺寸
        .background(Color.Blue)
) {
    AsyncImage(
        modifier = Modifier
            .fillMaxSize(), // 用fillMaxSize替代fillMaxWidth+height，让图片完全填充Box
        model = state.mainItems?.image,
        contentDescription = null,
        contentScale = ContentScale.FillBounds // 强制图片拉伸填满容器，要保持比例裁剪就换ContentScale.Crop
    )

    Column(
        modifier = Modifier.fillMaxWidth()
    ){
          Text(text = "TITLE")
          Text(text = "CATEGORY DATE")
    }
}

说明：

• 给Box加height(350.dp)，确保蓝色背景区域和图片容器高度一致；
• AsyncImage用fillMaxSize()替代原尺寸设置，让图片完全填充父容器；
• contentScale选FillBounds会拉伸图片填满容器，选Crop则保持图片比例并裁剪多余部分，可根据需求切换。

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