Jetpack Compose 中图像的线性渐变

Question

我试图在背景图像上显示线性渐变，以便更轻松地阅读图像上的文本。但由于缺乏文档，要做到这一点并不容易。我想完成类似这个的事情。

这是我的组件：

@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))
    }
}

Answer 1

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

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

Answer 2

您的解决方案位于以下代码中：

@Composable
override fun MakeComposable(screen: ScreenID?, onEvent: (ScreenEvent) -> Unit) {
    if (screen == null) return

    val gradient = Brush.linearGradient(
        colors = listOf(Color.Transparent, Color.Black), // Transparent to black gradient
        start = Offset(0f, 0f),
        end = Offset(0f, 1000f), // Vertical gradient
        tileMode = TileMode.Clamp
    )

    ComposeTestTheme {
        Box(modifier = Modifier.fillMaxSize()) {
            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)
                }
            }

            // Gradient overlay
            Box(
                modifier = Modifier
                    .fillMaxSize() // Fill the entire screen to cover the image
                    .background(gradient)
            )
        }
    }
}