如何使用 jetpack compose 在图像上叠加文本

Question

我正在尝试制作一些使用与下图相同概念的东西；

类似背景的图像，上面有文字。

我尝试制作一张卡片并为其指定图像的背景颜色，但出现错误；

我想要做的是在图像上覆盖一些文本，如上图所示。

那么请问我该如何安排这段代码。我需要将所有内容都放在一个可组合项中，因为我需要填充它。

提前感谢您的理解和帮助。

请，我很乐意提供所需的更多信息。

Answer 1

使用 aBox来覆盖可组合项。

就像是：

@Composable
fun ImageAndText(
    modifier: Modifier = Modifier,
    painter: Painter,
    contentDescription: String,
    text: String 
) {
    val shape =  RoundedCornerShape(8.dp)
    val height = 100.dp
    Box(
        modifier = modifier
            .height(height)
            .fillMaxWidth()
            .background(White, shape = shape),
        contentAlignment = Alignment.Center
    ) {
        Image(
            painter = painter,
            contentDescription = contentDescription,
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .fillMaxSize()
                .clip(shape)
        )

        Text(
            text = text, 
            color = White
        )

    }
}