[英]How to create Angular gradient in Jetpack compose?
I want to create an angular gradient like this in Android Jetpack Compose.我想在 Android Jetpack Compose 中创建这样的 angular 渐变。
The gradient is made in Figma and below is the android code in Figma Inspect.渐变是在 Figma 中制作的,下面是 Figma Inspect 中的 android 代码。
I could only find resources for the linear gradient with only one angle .我只能找到只有一个角度的线性渐变的资源。
How can I create this Angular gradient in Jetpack compose?如何在 Jetpack Compose 中创建这个 Angular 渐变?
What you need is Brush.sweepGradient
with colorStops and setting center correctly.您需要的是带有
Brush.sweepGradient
并正确设置中心的 Brush.sweepGradient。 Gradient stops start from 3'o clock, right center, so you need to add 0.25 to each stop and move the ones that pass 1 to start, i moved 2 colors from bottom to top at 0.01, and 0.14渐变停止点从 3 点钟开始,右中心,所以你需要在每个停止点上增加 0.25 并将通过 1 的停止点移动到开始,我将 2 colors 从底部移动到顶部 0.01 和 0.14
@Composable
private fun SweepGradientExample() {
val colorStops = listOf(
0.01f to Color(0x8C1339FF),
0.14f to Color(0x8CFF13A1),
0.31f to Color(0x8C1380FF),
0.54f to Color(0x8CD013FF),
0.81f to Color(0x8C7B13FF),
).toTypedArray()
val density = LocalDensity.current
val centerX: Float
val centerY: Float
with(density) {
centerX = 161.dp.toPx() / 2
centerY = 97.dp.toPx() / 2
}
val brush = Brush.sweepGradient(
colorStops = colorStops,
center = Offset(centerX, centerY)
)
Box(modifier = Modifier
.size(width = 161.dp, height = 97.dp)
.background(brush)
)
}
Result结果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.