Jetpack Compose 中图像上的线性渐变答案

【问题标题】：Linear Gradient over image in Jetpack ComposeJetpack Compose 中图像上的线性渐变
【发布时间】：2022-03-12 01:55:47
【问题描述】：

我正在尝试在背景图像上显示线性渐变，以便更容易阅读图像上的文本。但是由于缺乏文档，这并不容易。我想完成类似this 的事情。

这是我的组件：

@Composable
override fun MakeComposable(screen: ScreenID?, onEvent: (ScreenEvent) -> Unit) {
    if (screen == null) return
    
    val gradient = Brush.linearGradient(
        colors = listOf(Color.Transparent, Color.Black),
        start = Offset.Zero,
        end = Offset.Infinite,
        tileMode = TileMode.Clamp
        )

    ComposeTestTheme {
        Box(modifier = Modifier.background(color = MaterialTheme.colors.surface))
        {
            screen.backgroundImage?.let { ui.Image(ImageData(url = it), onEvent = onEvent) }
            LazyColumn(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxSize()) {
                this.items(screen.modules) { module ->
                    ModuleComposable(ui, module, onEvent)
                }
            }
        }
        Box(modifier = Modifier.fillMaxSize().background(gradient))
    }
}

【问题讨论】：

标签： android gradient android-jetpack-compose linear-gradients

【解决方案1】：

您可以使用 Box 创建一个可组合项，以将每个可组合项叠加在一起。它看起来像这样（伪代码）：

@Composable
fun ShadowedImage(modifier = Modifier) {
  Box(modifier) {
    Image(modifier = Modifier.fillMaxSize())
    Surface(modifier = Modifier.fillMaxSize().background(brush = gradient))
    Text(text = "Your text")
  }
}

【讨论】：