Android Jetpack Compose渐变

Question

使用 Jetpack Compose 能否在图像 drawable 上绘制渐变？

fun HeroCover() {
    Column {
        val image = +imageResource(R.drawable.edge_of_tomorrow_poster)
        Container(modifier = Height(440.dp) wraps Expanded) {
            Clip(shape = RoundedCornerShape(8.dp)) {
                DrawImage(image = image)
            }
        }
    }
}

我希望在图片上方绘制一个半透明的渐变。

- AouledIssa

---

请提供所需输出的图像。 - Rajnish suryavanshi

请参考这个答案，希望能对您有所帮助。 - user14004870

Answer 1

试一下这个：

Box(
    modifier = Modifier
        .background(
            brush = Brush.verticalGradient(
                colors = listOf(
                    MaterialTheme.colors.primary,
                    MaterialTheme.colors.primaryVariant
                )
            )
        )
) {
    Content()
}

- Luis Fer Garcia

---

这解决了问题并符合Compose最新的BETA API更改。 - AouledIssa

Jetpack Compose 中的完美代码！ - Hossein Badrnezhad

这不是在渐变上方绘制内容吗？ - undefined

@jayeffkay 是的！Content函数可以绘制任何你需要的内容，而渐变将成为背景。 - undefined

谢谢 @LuisFerGarcia，这个答案对我很有帮助。但是它并没有像原帖提问者所问的那样将渐变放在图像的顶部。鉴于图像是在内容中绘制的。 - undefined

Answer 2

这是一个关于如何在Compose中使用LinearGradientShader的示例。我想你可以使用类似的方法来实现你想要的效果。

https://gist.github.com/lelandrichardson/35b2743e1acd5d672f963f92aca57d4a#file-shimmer-kt-L83

更新：这里有另一种在Kotlin语言的Slack频道上发现的方法 -

Box(
    modifier = Modifier
        .preferredSize(500.dp, 500.dp)
        .drawBackground(
            HorizontalGradient(
                0.0f to Color.Red,
                0.5f to Color.Green,
                1.0f to Color.Blue,
                startX = Px.Zero,
                endX = 500.dp.toPx()
            )
        )
)

来源: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1590430288092800

- Vinay Gaba

---

我找不到 toPx() 函数。 - David Ibrahim

关于 toPx() 方法，请参考此链接 https://dev59.com/YFEG5IYBdhLWcg3wcN3q#65921800 - I'm a frog dragon

过时了，Luis的答案更简单且有效。 - rocknow

Answer 3

这里有一个灵感来自Jetsnack示例代码的方法： 用你自己的颜色替换透明和黑巧克力。

@Composable
fun GradientView(modifier: Modifier = Modifier) {
    Box(modifier = modifier.verticalGradientBackground(listOf(transparent, darkChocolate)))
}

fun Modifier.verticalGradientBackground(
        colors: List<Color>
) = drawWithCache {
    val gradient = VerticalGradient(startY = 0.0f, endY = size.width, colors = colors)
    onDraw {
        drawRect(brush = gradient)
    }
}

- sachadso

Answer 4

你可以使用以下代码：

  @Composable
  fun GradientBackground() {
    val gradientBrush = Brush.verticalGradient(
        colors = listOf(Color.Blue, Color.Red), // Gradient colors
        startY = 0f, // Starting Y position of the gradient
        endY = 500f // Ending Y position of the gradient
    )

    Text(
        modifier = Modifier
            .fillMaxSize()
            .background(brush = gradientBrush),
        text = "Hello, Gradient Text",
        color = Color.White
    )
 }

- Ravi Vaghela