Jetpack Compose中Column内图片渲染异常原因咨询

正在完成应用界面开发练习，目标界面样式为：顶部是一张未占满屏幕宽度的固定高度图片，下方依次展示三段文本。

目前文本部分已按要求渲染，但图片会占满屏幕宽度，当前代码如下：

@Composable
fun JetpackComposeTutorial() {
    Column {
        Image(
            painter = painterResource(id = R.drawable.bg_compose_background),
            contentDescription = null,
            modifier = Modifier.fillMaxWidth().height(100.dp)
        )

        Text(
            text = stringResource(R.string.jetpack_compose_tutorial),
            fontSize = 24.sp,
            modifier = Modifier.padding(16.dp)
        )
        Text(
            text = stringResource(R.string.jetpack_compose_abstract),
            fontSize = 14.sp,
            modifier = Modifier.padding(start = 16.dp, end = 16.dp),
            textAlign = TextAlign.Justify
        )
        Text(
            text = stringResource(R.string.jetpack_compose_des),
            fontSize = 14.sp,
            textAlign = TextAlign.Justify
        )
    }
}

当前输出效果：图片占满屏幕宽度，不符合目标样式。但注释掉Modifier.fillMaxWidth().height(120.dp)后，界面符合预期。请问是否是该Modifier导致的问题？

就是Modifier.fillMaxWidth()导致的问题。

fillMaxWidth()修饰符的作用是强制组件占满父容器的全部可用宽度，这直接让你的图片被拉伸到了屏幕整个宽度。当你注释掉这个修饰符后，Image会默认按自身原始尺寸（或根据父布局约束自适应到合适宽度）展示，再结合固定高度设置，就能得到目标界面里未占满宽度的效果。

如果后续需要图片保持宽高比且占满宽度的场景，可以搭配contentScale = ContentScale.Crop等缩放模式使用，但你的需求不需要图片占满宽度，所以去掉fillMaxWidth()就完全符合预期了。

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