Android Jetpack 组合渐变答案

【问题标题】：Android Jetpack compose gradientAndroid Jetpack 组合渐变
【发布时间】：2020-04-08 10:05:40
【问题描述】：

是否可以使用 Jetpack Compose 在可绘制的图像上绘制渐变？

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

我想在图像上绘制一个半透明的渐变。

【问题讨论】：

能否提供所需输出的图像。
stackoverflow.com/a/65697832/14004870 参考这个答案希望对你有帮助。

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

【解决方案1】：

使用 Jetpack Compose BETA02：

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

【讨论】：

这解决了问题并符合 Compose BETA 之后的最新 API 更改

【解决方案2】：

以下是如何在 Compose 中对绘制对象使用 LinearGradientShader 的示例。我想你可以使用类似的东西来获得你想要的东西

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

更新：这是我在 kotlin lang 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

【讨论】：

我找不到 toPx() 函数
对于toPx()方法，参考这个stackoverflow.com/a/65921800/75579
过时了，来自 Luis 的答案更简单，而且有效。

【解决方案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)
    }
}

【讨论】：