gpt4 book ai didi

android - Jetpack Compose 中的图像渐变

转载 作者:行者123 更新时间:2023-12-04 23:40:06 35 4
gpt4 key购买 nike

这是我的组件:

@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
)
}
}
}
}
这是它的外观:
cover
我想在 Image 上显示深色渐变在 Text 后面使文本易于阅读。我想我必须使用 LinearGradientRadialGradient但由于缺乏文档,我无法做到。
编辑: 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))
}
原来的:
enter image description here
后:
enter image description here
您还可以将渐变应用到 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)
}
}
)
enter image description here

关于android - Jetpack Compose 中的图像渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63871706/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com