Jetpack Compose中边框与阴影无法随图片填充父布局问题排查

我想在Box组件中居中显示一张带有边框和阴影的图片，以下代码可正常运行：

Box (modifier = modifier
            .fillMaxSize()
            .weight(10f)){
            Image(
                painter = painterResource(id = R.drawable.picture_1),
                contentDescription = "current picture",
                modifier = modifier
                    //.fillMaxSize()
                    .border(
                        BorderStroke(30.dp, Color.White)
                    )
                    .padding(30.dp)
                    .shadow(elevation = 20.dp)
                    .align(Alignment.Center)

            )}

但此时图片尺寸偏小，显示效果为：图片仅以原始大小显示，白色边框和阴影正常包裹在图片外围。

我尝试取消注释.fillMaxSize()让图片填充父布局，却发现边框和阴影并未跟随图片一起扩展，显示效果为：图片填满父布局，但白色边框和阴影仍保持原始小尺寸，与图片尺寸不匹配。

请问我哪里操作错误，该如何修复这个问题？

问题出在Modifier的执行顺序——Compose中Modifier是按从左到右的顺序生效的，你之前把.fillMaxSize()放在边框、阴影这类装饰性Modifier之后，导致这些装饰效果先基于图片的原始尺寸生成，之后图片再放大填充父布局，装饰自然不会跟着扩展。

只需调整Modifier顺序，让尺寸类Modifier先执行，再应用装饰效果即可：

Box(modifier = modifier
    .fillMaxSize()
    .weight(10f)) {
    Image(
        painter = painterResource(id = R.drawable.picture_1),
        contentDescription = "current picture",
        modifier = modifier
            .fillMaxSize()
            .padding(30.dp)
            .border(BorderStroke(30.dp, Color.White))
            .shadow(elevation = 20.dp)
            .align(Alignment.Center),
        contentScale = ContentScale.Fit // 可选：保持图片比例，避免拉伸变形
    )
}

补充说明：

• 将.padding(30.dp)移到.border()之前，能让边框和图片之间保留间距，和你最初的设计逻辑一致；
• 添加contentScale = ContentScale.Fit可以防止图片被强制拉伸变形，根据你的实际需求选择是否保留。

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