Android 如何使用 Jetpack Compose 在图像上叠加文本

发布于11月26日

我正在try 做一些东西，使用相同的概念，如下图所示；

一种类似背景的图像，上面覆盖着文本.

我试图制作一张卡片，并给它一个背景图像的 colored颜色，但我得到了一个错误；

What I want to do is overlay some texts on an image，如上图所示.

那么，请问我该如何安排这个代码呢？我需要所有东西都放在一个可组合的组件中，因为我需要填充它.

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

拜托，我很乐意提供更多需要的信息.

推荐答案

使用Box来覆盖可组合的内容.

类似于:

@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
        )

    }
}