jetpack-compose做一个倒计时效果

效果：

 

废话不说，直接上代码吧：

1、声明一个倒计时的UI。说实话，声明式UI真的很好， 可以实时预览效果，还便于单元测试。

@Composable
fun Clock(count: Int) {
    val arc = 1.7f
    val inter = 0.3f
    val num = 360/2
    
    Canvas(modifier = Modifier
        .size(200.dp)
    ) {
        for(i in 0 until num) {
            drawArc(Color.LightGray, -90+i*(arc+inter), arc, true)
        }
    }

    Canvas(modifier = Modifier
        .size(200.dp)
    ) {
        for(i in 0 until count) {
            drawArc(Brush.horizontalGradient(listOf(Color.Yellow, Color.Green)), -90+i*(arc+inter), arc, true)
        }
    }

    Canvas(modifier = Modifier.size(200.dp)) {
        drawCircle(Color.White, radius = 250f)
    }

    Canvas(modifier = Modifier
        .size(200.dp)
    ) {
        drawArc(Color.Red, -90+count*2f-2f, 1.7f, true)
    }
}

@Preview
@Composable
fun ClockPreview() {
    Clock(8)
}

2、让它动起来。简单起见直接用线程了。。。

@Composable
fun AnimClock() {
    var count by remember{mutableStateOf(360/2)}
    Clock(count = count)
    thread {
        Thread.sleep(100)
        count--
        if (count <= 0) count = 360/2
    }
}