如何在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()
    ){ 
       //....
    }