Compose - 繪制帶漸變的圓弧

Question

我正在嘗試在撰寫中實現以下組件

這是我到目前為止所擁有的

@Composable
fun CircularLoader(
    size: Dp = 40.dp,
    strokeWidth: Dp = 4.dp
) {

    val stroke = with(LocalDensity.current) {
        Stroke(width = strokeWidth.toPx(), cap = StrokeCap.Round)
    }

    // draw on canvas
    Canvas(
        Modifier
            .progressSemantics()
            .size(size)
            .padding(strokeWidth / 2)
    ) {

        drawArc(
            startAngle = 0f,
            sweepAngle = 300f,
            useCenter = false,
            brush = Brush.linearGradient(listOf(
                Color(0xFFEF7B7B),
                Color(0x00EF7B7B)
            )),
            style = stroke
        )
    }
}

Answer 1

正如 Gabriele Mariotti 所說，嘗試使用sweepGradient ：

@Composable
@Preview
fun CircularLoaderPreview() {
    Box(modifier = Modifier.background(Color(0xFF0F1A30))) {
        Box(modifier = Modifier.padding(16.dp)) {
            CircularLoader(size = 120.dp, strokeWidth = 18.dp)
        }
    }
}

@Composable
fun CircularLoader(
    size: Dp,
    strokeWidth: Dp
) {
    val stroke = with(LocalDensity.current) {
        Stroke(width = strokeWidth.toPx(), cap = StrokeCap.Round)
    }

    // draw on canvas
    Canvas(
        modifier = Modifier
            .progressSemantics()
            .size(size)
            .padding(strokeWidth / 2)
    ) {

        drawArc(
            startAngle = 0f,
            sweepAngle = 300f,
            useCenter = false,
            brush = Brush.sweepGradient( // !!! that what 
                0f to Color(0x00EF7B7B),
                0.9f to Color(0xFFEF7B7B),
                0.91f to Color(0x00EF7B7B), // there was a problem with start of the gradient, maybe there way to solve it better
                1f to Color(0x00EF7B7B)
            ),
            style = stroke
        )
    }
}

結果：