Android Jetpack 使用 Canvas 组成半圆

正如我在 comments 中提到的那样，如果你想要一个覆盖整个高度的半弧，弧使用矩形，只要是你画弧高度的两倍

@Composable
private fun ArcComposable(modifier: Modifier) {
    Box(
        modifier = modifier
            .background(Color.Red)
    ) {
        Canvas(modifier = Modifier
            .size(300.dp)
            .clipToBounds()) {
            drawArc(
                color = Color.LightGray,
                -180f,
                180f,
                useCenter = false,
                size = Size(size.width, size.height * 2),
                style = Stroke(8.dp.toPx(), cap = StrokeCap.Round)
            )
        }
        Text(
            modifier = Modifier.align(alignment = Alignment.Center),
            text = "20 Mbps",
            color = Color.White,
            fontSize = 20.sp
        )
    }
}

我添加了修饰符.clipToBounds()，因为默认情况下会将strokeCap round添加到线的长度.您只需减少尺寸和高度几像素，以匹配画布内部.默认情况下，画布即使不使用大小设置修改器，也会绘制超出其边界的任何内容，除非使用Modifier.clipToBounds()

private fun ArcComposable(modifier: Modifier) {
    Box(
        modifier = modifier
            .background(Color.Red)
    ) {
        Canvas(
            modifier = Modifier
                .size(300.dp)
//            .clipToBounds()
        ) {
            drawArc(
                color = Color.LightGray,
                -180f,
                180f,
                useCenter = false,
                topLeft = Offset(4.dp.toPx(), 6.dp.toPx()),
                size = Size(size.width - 8.dp.toPx(), size.height * 2 - 20.dp.toPx()),
                style = Stroke(8.dp.toPx(), cap = StrokeCap.Round)
            )
        }
        Text(
            modifier = Modifier.align(alignment = Alignment.Center),
            text = "20 Mbps",
            color = Color.White,
            fontSize = 20.sp
        )
    }
}