如何在 Jetpack compose 中创建角度渐变？

Question

我想在 Android Jetpack Compose 中创建这样的角度渐变。

渐变是在 Figma 中制作的，下面是 Figma Inspect 中的 android 代码。

我只能找到只有一个角度的线性渐变的资源。

如何在 Jetpack compose 中创建这个角度渐变？

Answer 1

您需要的是Brush.sweepGradient使用 colorStops 并正确设置中心。渐变停止点从 3 点钟开始，右中心，因此您需要为每个停止点添加 0.25，并将超​​过 1 的停止点移动到开始位置，我从下到上移动了 2 种颜色，分别为 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)
    )
}

结果