Jetpack ComposeのCanvasでメーターのような可変する円を作る

drawCircle()

    Canvas(
        modifier = Modifier.size(250.dp),
        onDraw = {
            drawCircle(Color.Green)
        }
    )

可変でない場合の円の場合はdrawCircle() または、drawOval() 使用すればいいのですが、メーターのように中を可変させたい場合は、drawArc() を使用します。

次は上のdrawCircle()を背景としてdrawArc()を使ってみましょう.

drawArc()

    Column(
        Modifier.size(225.dp)
    ) {
        Canvas(
            modifier = Modifier.size(225.dp),
            onDraw = {
            
                drawCircle(Color.Green)
                
                drawArc(
                    color = Color.Yellow,
                    startAngle = -90f,
                    sweepAngle = 90f,
                    useCenter = true,
                )
            }
        )
    }

startAngleとsweepAngleを指定することで
上の画像のようのできます。

例えば、何かのメーターのように使いたいなら、表示したい情報を取得した時や数秒置きなどにとsweepAngleを調節すればいいと思います。
sweepAngleはstartAngleの位置からの角度になります。

startAngleは 0が時計の３時の方向ななっているので、メーターのスタート位置を円の上部にしたい場合、270f　もしくは-90fを指定します。
（私が触ったプロジェクトでは270fだとうまく表示されない時があった。謎。）

注意

useCenterをfalseにすると、以下のようになるので必ずtrueにしておきましょう。

Canvas()の外枠を Column()（たぶん何でもいい）などで囲って範囲を指定しないと

こんな感じで表示できる範囲いっぱいに表示されてしまう。

参考