如何在jetpackcompose中使表面背景半透明,但内容不透明?

我想实现这种布局:

在 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 应用于表面及其内容。所以无论我放什么内容,即使是另一个有背景的表面,也会半透明。例如,在这里,底部的两个句子和两个组件也将是半透明的。

回答

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

就像是:

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


以上是如何在jetpackcompose中使表面背景半透明,但内容不透明?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>