如何在 Jetpack Compose 中使表面背景半透明，而不是内容？

Question

我想实现这样的布局：

在 XML 中，我会在具有 match_parent 属性的相对布局中添加图像，然后将黑色半透明背景的视图也设置为 match_parent，然后内容.

在 compose 中，我使这个可组合：

@Composable
fun ImageCover(resourceId: Int, alpha: Float = 0.5f, content: @Composable () -> Unit) {
    Box(modifier = Modifier.fillMaxSize()) {
        Image(
            painter = painterResource(id = resourceId),
            contentDescription = null,
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        Surface(
            color = Color.Black, modifier = Modifier
                .fillMaxSize()
                .alpha(alpha)
        ) {
            content()
        }
    }
}

但问题是 alpha 应用于表面及其内容。所以无论我在内容中放入什么，即使是另一个有背景的表面，也会是半透明的。比如这里，下面的两个句子和两个组件也会半透明。

Answer 1

Surface 的背景颜色基于 color 属性。
将 alpha 应用于 color 属性而不是 Modifier.

类似于：

   Surface(
        color = Color.Black.copy(alpha = 0.6f), 
        modifier = Modifier.fillMaxSize()
    ){ 
       //....
    }

如何在 Jetpack Compose 中使表面背景半透明，而不是内容？

How to make a surface background half transparent in jetpack compose, but not the content?

android

android-jetpack-compose