如何在Jetpack Compose中用Canvas实现容器底部圆角背景

问题分析 #

你当前的代码中drawArc参数设置有误，导致圆弧与矩形无法衔接成预期的底部圆角效果。另外，单独嵌套Canvas作为背景层，不如直接使用Modifier.drawBehind更贴合Compose的背景绘制逻辑。

方法一：使用Modifier.drawBehind绘制背景（推荐） #

drawBehind是Compose专门用于绘制背景的修饰符，直接在布局的背景层完成绘制，写法更简洁：

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Column(modifier = Modifier.fillMaxSize()) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Red)
                .drawBehind {
                    // 底部半圆的半径，也可以设固定值如32.dp.toPx()
                    val cornerRadius = size.width / 2f
                    val rectHeight = size.height - cornerRadius

                    // 构建底部带圆角的路径
                    val path = Path().apply {
                        moveTo(0f, 0f)
                        lineTo(size.width, 0f)
                        lineTo(size.width, rectHeight)
                        // 绘制底部半圆圆弧
                        arcTo(
                            rect = Rect(
                                left = 0f,
                                top = rectHeight,
                                right = size.width,
                                bottom = size.height
                            ),
                            startAngleDegrees = 0f,
                            sweepAngleDegrees = 180f,
                            forceMoveTo = false
                        )
                        lineTo(0f, rectHeight)
                        close()
                    }

                    drawPath(path = path, color = Color.Blue)
                }
        ) {
            Text(text = "Hello")
        }
    }
}

方法二：修复你的Canvas代码 #

如果坚持用嵌套Canvas的方式，需调整drawArc的参数，确保圆弧与矩形正确衔接：

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Column(modifier = Modifier.fillMaxSize()) {
        Box(modifier = Modifier.background(Color.Red)) {
            Canvas(modifier = Modifier.fillMaxSize()) {
                val cornerRadius = size.width / 2f
                val rectHeight = size.height - cornerRadius

                // 绘制上方矩形
                drawRect(
                    color = Color.Blue,
                    size = Size(width = size.width, height = rectHeight)
                )

                // 绘制底部半圆，rect参数需覆盖底部圆弧区域
                drawArc(
                    color = Color.Blue,
                    startAngle = 0f,
                    sweepAngle = 180f,
                    useCenter = true, // 设为true填充圆弧与中心区域，形成完整半圆
                    rect = Rect(
                        left = 0f,
                        top = rectHeight,
                        right = size.width,
                        bottom = size.height
                    )
                )
            }
            Text(text = "Hello")
        }
    }
}

额外扩展：底部左右圆角效果 #

如果需要的是底部左右两个圆角（而非整底半圆），只需将cornerRadius设为固定值，并修改路径绘制逻辑：

val path = Path().apply {
    val cornerRadius = 32.dp.toPx()
    moveTo(0f, 0f)
    lineTo(size.width, 0f)
    lineTo(size.width, size.height - cornerRadius)
    // 绘制右下角圆角
    arcTo(
        rect = Rect(
            size.width - 2 * cornerRadius,
            size.height - 2 * cornerRadius,
            size.width,
            size.height
        ),
        startAngleDegrees = 0f,
        sweepAngleDegrees = 90f,
        forceMoveTo = false
    )
    lineTo(cornerRadius, size.height)
    // 绘制左下角圆角
    arcTo(
        rect = Rect(
            0f,
            size.height - 2 * cornerRadius,
            2 * cornerRadius,
            size.height
        ),
        startAngleDegrees = 90f,
        sweepAngleDegrees = 90f,
        forceMoveTo = false
    )
    close()
}

内容的提问来源于stack exchange，提问作者Umesh Saraswat