这是我的组件:
@Composable
fun Cover(
name: String,
imageRes: Int,
modifier: Modifier = Modifier.padding(16.dp, 8.dp)
) {
Box(modifier) {
Card(
shape = RoundedCornerShape(4.dp),
backgroundColor = MaterialTheme.colors.secondary,
elevation = 4.dp
) {
Stack {
Image(
imageResource(imageRes),
modifier = Modifier
.gravity(Alignment.Center)
.aspectRatio(2f),
contentScale = ContentScale.Crop,
)
Text(
text = name,
modifier = Modifier
.gravity(Alignment.BottomStart)
.padding(8.dp),
style = MaterialTheme.typography.h6
)
}
}
}
}
这是它的外观:我想在
Image
上显示深色渐变在 Text
后面使文本易于阅读。我想我必须使用 LinearGradient
或 RadialGradient
但由于缺乏文档,我无法做到。编辑:This是我想要做的,但使用 Jetpack Compose。
最佳答案
与 1.0.0
你可以使用类似的东西:
var sizeImage by remember { mutableStateOf(IntSize.Zero) }
val gradient = Brush.verticalGradient(
colors = listOf(Color.Transparent, Color.Black),
startY = sizeImage.height.toFloat()/3, // 1/3
endY = sizeImage.height.toFloat()
)
Box(){
Image(painter = painterResource(id = R.drawable.banner),
contentDescription = "",
modifier = Modifier.onGloballyPositioned {
sizeImage = it.size
})
Box(modifier = Modifier.matchParentSize().background(gradient))
}
原来的:后:
您还可以将渐变应用到
Image()
使用 .drawWithCache
修饰符和 onDrawWithContent
允许开发人员在布局内容之前或之后进行绘制。 Image(painter = painterResource(id = R.drawable.conero),
contentDescription = "",
modifier = Modifier.drawWithCache {
val gradient = Brush.verticalGradient(
colors = listOf(Color.Transparent, Color.Black),
startY = size.height/3,
endY = size.height
)
onDrawWithContent {
drawContent()
drawRect(gradient,blendMode = BlendMode.Multiply)
}
}
)
关于android - Jetpack Compose 中的图像渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63871706/