Jetpack Compose中图片垂直填充容器问题求助

我遇到一个Jetpack Compose的图片缩放问题，折腾好几个小时了，求帮忙解决。我在Row中间放了个Box，想让图片放进Box里后垂直方向填满Box的上下边缘（允许破坏宽高比）。试过给Image加各种Modifier和所有ContentScale参数，都没效果。我的图片尺寸是2000×1200，比目标Box容器大。

相关代码 #

@Preview(device = "spec:width=1280dp,height=800dp,dpi=310")
@Composable
fun Preview(){
    Row(modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center) {
        Box(modifier = Modifier
            .fillMaxSize(.5f).background(Color.Red)) {
                BadgeImage()
        }
    }
}

@Composable
fun BadgeImage() {
    Image(painter = painterResource(id = R.drawable.badge_blank),
        contentDescription = null,
        modifier = Modifier.background(Color.White),
        contentScale = ContentScale.FillHeight,
        )
}

问题说明：蓝色图片需要拉伸填充白色Box的上下边缘，原图尺寸为2000×1200

解决方法 #

核心问题是你没给Image设置填充父容器的Modifier，结合正确的ContentScale就能解决：

方案1：垂直填充，水平按比例适配（超出部分裁剪） #

修改BadgeImage函数，给Image添加fillMaxSize()让它占满Box空间，搭配ContentScale.FillHeight保证垂直方向填满：

@Composable
fun BadgeImage() {
    Image(
        painter = painterResource(id = R.drawable.badge_blank),
        contentDescription = null,
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
        contentScale = ContentScale.FillHeight
    )
}

方案2：强制拉伸填满整个容器（完全忽略原宽高比） #

如果允许彻底破坏图片比例，直接用ContentScale.FillBounds让图片完全适配容器尺寸：

@Composable
fun BadgeImage() {
    Image(
        painter = painterResource(id = R.drawable.badge_blank),
        contentDescription = null,
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
        contentScale = ContentScale.FillBounds
    )
}

关键原理 #

• Modifier.fillMaxSize()是基础：让Image的尺寸和父Box完全一致，之前缺少这个，Image会按自身尺寸或默认规则布局，根本填不满容器。
• ContentScale.FillHeight：优先保证高度填满容器，宽度按原比例缩放调整，超出容器的部分会被自动裁剪。
• ContentScale.FillBounds：强制图片拉伸至容器的宽高，完全适配容器，完全无视原图的宽高比例。

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