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

enter image description here

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

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

enter image description here

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
        )

    }
}

enter image description here

Android相关问答推荐

listOf(listOf(字符串))在lazyArchitect(lazyStream)中合成

如何使用Jetpack Compose使水平pager 显示离屏页面?

当X为lambda函数时,如何避免Android Studio错误检测参数X未使用?

无法在Jetpack Compose中显示Admob原生广告

Jetapck Compose:将Compose BOM更新为最新版本&2024.01.00&Quot;CircularProgressIndicator后出现错误

DocumentFile.canWrite()、DocumentFile.Existes()-使用本地内置手机存储(而不是云)时性能较差(占用太多CPU时间)

在更改MuableState的值后,Android API 26(Oreo)上的Composable不能重新组合

如何制作安卓';s FileProvider在Android 11上使用外部存储+

可组合:don';t剪辑视图

如何删除房间数据库?

在 AGP 8.0 中构建失败,无法应用插件realm-android. APIandroid.registerTransform已删除

在 Jetpack Compose 中重用具有重复代码的列

每次在 Jetpack Compose 中调用导航

如何在 Jetpack Compose 中禁用 TabRow 或 Tab 中的涟漪效应?

Kotlin Compose 全局页脚视图

为什么在try 实例化 Mediaplayer 时会出现 NullPointerException?安卓Kotlin

将生成的 AAR 与 Composables 一起使用时未解决的参考

Android TTS 在屏幕关闭一段时间后停止朗读

Android:如何获取具有纬度和经度的位置的图像

验证备份 ZIP 文件