盒子包含不需要的填充物

Question

我正在尝试撰写并尝试重现 Twitter 个人资料布局。 它应该看起来像位于背景图像右下角的个人资料图像，下面是一个名称。

为了堆叠背景和个人资料图像，我尝试使用盒子。 我的盒子旁边有一个文本。 我将它们包装在一个列中以进行垂直布局。 为什么我的背景图片显示左右边距，框和图片使用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)
    }
}

Answer 1

将

contentScale

的

Image

设置为

FillBounds

或

FillWidth

。图像默认

contentScale

是

Fit

，因此无论您是否为

fillMaxWidth()

设置

Image

，您的画家都只会适合其容器：

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