Compose实现Twitter个人主页布局：Box背景图为何出现左右边距？

我正在使用Jetpack Compose尝试复刻Twitter个人主页布局，预期效果为背景图右下角放置头像，下方显示用户名。我通过Box组件堆叠背景图与头像，并将Box和Text置于Column中实现垂直布局。尽管Box和Image均使用了fillMaxWidth()，但背景图仍显示左右边距，请问这是什么原因？

代码如下：

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun TwitterProfile(user: User) {
    Column {
        Box(
            modifier = Modifier
                .height(220.dp)
                .fillMaxWidth()
        ) {
            Image(
                painter = painterResource(id = R.drawable.header_image),
                contentDescription = "Header Image",
                modifier = Modifier.fillMaxWidth()
            )
            // needed for padding because GlideImage lacks margin attribute
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(end = 15.dp, top = 130.dp),
                contentAlignment = Alignment.TopEnd
            ) {
                GlideImage(
                    contentScale = ContentScale.Crop,
                    model=user.avatarUrl,
                    contentDescription = selected.fullname,
                    modifier = Modifier
                        .clip(CircleShape)
                        .size(120.dp)
                        .border(
                            2.dp, MaterialTheme.colorScheme.primary,
                            CircleShape
                        )
                )

            }
        }
        Text(user.fullname)
    }
}

原因及解决办法 #

核心原因 #

背景图使用的Image组件默认contentScale为ContentScale.Fit，这个模式会严格保留图片原始宽高比。当图片宽高比和外层Box（高度220dp、宽度满屏）的宽高比不一致时，系统会自动在左右或上下留白，确保图片完整显示且比例不变，这就是你看到的左右边距。

解决步骤 #

给背景图的Image添加contentScale参数，根据需求选择对应缩放模式：

• 若希望图片完全填充Box区域，允许裁剪部分内容（和头像使用的逻辑一致）：

Image(
    painter = painterResource(id = R.drawable.header_image),
    contentDescription = "Header Image",
    modifier = Modifier.fillMaxWidth(),
    contentScale = ContentScale.Crop
)

• 若希望图片强制拉伸填充整个Box（可能导致图片变形）：

Image(
    painter = painterResource(id = R.drawable.header_image),
    contentDescription = "Header Image",
    modifier = Modifier.fillMaxWidth(),
    contentScale = ContentScale.FillBounds
)

额外检查：如果TwitterProfile组件被其他父组件包裹，确认父组件是否添加了padding或margin，这也可能导致背景图看起来有边距。

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