Jetpack Compose中Image composable设置fillMaxWidth未占满Column宽度问题

你的代码存在2个核心问题导致Image无法占满Column全宽：

• 仅给Image设置了fillMaxWidth()修饰符，没有配置高度自适应规则：默认Image组件的高度测量会优先匹配painter的原始尺寸，没有明确允许高度随宽度按比例缩放时，就算设置了ContentScale.FillWidth，布局测量阶段也会优先限制尺寸匹配原图大小，不会铺满父布局宽度。
• Coil异步加载的特性导致初始测量异常：rememberImagePainter是异步加载远程图片，在图片资源加载完成前，painter的默认尺寸为0，首次布局测量时Image拿到的尺寸约束就不是满宽，后续图片加载完成后不会自动触发重新测量，就会保持初始的错误尺寸。

调整Image的修饰符即可解决问题，修改后的代码如下：

@ExperimentalCoilApi
@Composable
fun Screen1() {
    Column(
        modifier = Modifier
            .fillMaxSize() ,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            modifier = Modifier
                .fillMaxWidth()
                // 让高度自动随图片宽高比适配，不需要硬编码比例值
                .height(IntrinsicSize.Min),
            painter = rememberImagePainter(
                data = "你的图片链接",
                builder = {
                    // 可选配置：添加占位图，进一步避免加载前的尺寸异常
                    placeholder(R.drawable.ic_placeholder)
                }
            ),
            contentDescription = "",
            contentScale = ContentScale.FillWidth
        )
        Text(
            text = "sample text",
            color = MaterialTheme.colors.onSurface,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            style = TextStyle(fontSize = 15.sp, fontWeight = FontWeight.SemiBold)
        )
        Text(
            text = "sample text" ,
            color = MaterialTheme.colors.onSurface,
            maxLines = 2,
            overflow = TextOverflow.Visible,
            textAlign = TextAlign.Center,
            style = TextStyle(fontSize = 12.sp)
        )
    }
}

如果你需要固定图片的宽高比（比如16:9）而不是完全匹配原图比例，也可以把height(IntrinsicSize.Min)替换为aspectRatio(16/9f)，同样可以实现宽度铺满、高度按比例适配的效果。

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