¿Es posible dibujar un degradado sobre una imagen dibujable usando 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)
}
}
}
}
Quiero dibujar un degradado translúcido encima de la imagen.
Luis Fer García
Prueba esto:
Box(
modifier = Modifier
.background(
brush = Brush.verticalGradient(
colors = listOf(
MaterialTheme.colors.primary,
MaterialTheme.colors.primaryVariant
)
)
)
) {
Content()
}
-
Esto resuelve el problema y cumple con los últimos cambios de API de Compose después de BETA
– Aouled Issa
29 oct 2021 a las 12:32
-
¡Código perfecto en composición jetpack!
– Hossein Badrnezhad
27 de junio a las 14:13
Vinay Gabá
Este es un ejemplo de cómo se usa LinearGradientShader en Compose en un objeto de pintura. Me imagino que podrías usar algo similar para obtener lo que quieres.
https://gist.github.com/lelandrichardson/35b2743e1acd5d672f963f92aca57d4a#file-shimmer-kt-L83
Actualizar: Aquí hay otra forma de hacerlo con la que me topé en los canales de 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()
)
)
)
Fuente: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1590430288092800
-
No puedo encontrar la función toPx()
–David Abraham
29 de noviembre de 2020 a las 9:05
-
por
toPx()
método, consulte este stackoverflow.com/a/65921800/75579– Soy un dragón rana
10 de marzo de 2021 a las 14:04
-
Desactualizada, la respuesta de Luis es más simple y funciona.
– rockear ahora
22 de julio de 2021 a las 9:05
Aquí hay una forma inspirada en el código de muestra de Jetsnack: Reemplace el chocolate transparente y oscuro por sus propios colores.
@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)
}
}
¿Podría proporcionar una imagen de la salida requerida?
– Rajnish suryavanshi
19 de diciembre de 2019 a las 6:52
stackoverflow.com/a/65697832/14004870 Consulte esta respuesta, espero que le ayude.
– usuario14004870
28 oct 2021 a las 15:19