Compose中rotate后调用fillMaxSize导致图片无法填充父容器问题

原代码中图片旋转后无法填充父容器的核心问题是Modifier的执行顺序错误，同时contentScale的搭配逻辑也不对。

正确实现代码 #

调整Modifier顺序，让图片先填充父容器再执行旋转，配合合适的contentScale即可达到预期效果：

@Composable
fun App() {
    MaterialTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Gray)
        ) {
            Image(
                modifier = Modifier
                    .fillMaxSize() // 优先让图片填充父容器空间
                    .rotate(90f)   // 基于填充后的尺寸执行旋转
                ,
                painter = painterResource(Res.drawable.hello),
                contentDescription = null,
                contentScale = ContentScale.FillBounds // 强制填充容器（需保持比例可选ContentScale.Crop）
            )
        }
    }
}

关键说明 #

• Modifier顺序逻辑：Compose的Modifier是按从左到右的顺序生效的，原代码先旋转再填充，会导致旋转后的图片基于自身原始尺寸做适配，自然无法填满父容器；调整顺序后，图片先占据父容器全部空间，再基于该尺寸完成旋转。
• contentScale选择：
  • ContentScale.FillBounds：强制图片拉伸填充整个容器（图片宽高比与容器不一致时会变形）
  • ContentScale.Crop：保持图片比例，裁剪超出容器的部分（需配合先填充再旋转的顺序才会生效）

效果对比 #

• 原效果（左）与预期效果（右）：
  
  
• 错误使用ContentScale.Crop的效果：
  

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