Jetpack Compose如何绘制超出屏幕的圆形作为背景？

我希望在Jetpack Compose中创建带有大型半圆背景的界面，效果如附图所示。此前在XML布局中，我通过设置layout_constraintWidth_percent="2"将圆形缩放至两倍宽度实现了该效果，但在Compose中却无从下手。请问是否可以绘制超出屏幕尺寸的圆形并将其作为背景？

原XML布局代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/red_400">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/topGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.25" />

    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_oval"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/topGuideline"
        app:layout_constraintWidth_percent="2" />

</androidx.constraintlayout.widget.ConstraintLayout>

当然可以在Compose中实现这种超出屏幕的半圆背景，核心思路是直接绘制足够大的圆形，或者通过布局修饰符实现，下面提供两种可行方案：

方案一：使用Canvas绘制 #

通过Compose的Canvas精准控制圆形的大小和位置，还原XML中的效果：

@Composable
fun HalfCircleBackgroundScreen() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.TopCenter
    ) {
        // 底层背景色
        Box(Modifier.fillMaxSize().background(Color(0xFFF44336)))
        
        // 绘制超出屏幕的半圆
        Canvas(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(0.75f)
                .align(Alignment.TopCenter)
        ) {
            // 圆形直径设为屏幕宽度的2倍，对应XML的layout_constraintWidth_percent="2"
            val circleDiameter = size.width * 2
            // 圆心在屏幕水平居中、垂直方向对齐topGuideline位置（屏幕高度25%处）
            drawCircle(
                color = Color.White,
                radius = circleDiameter / 2,
                center = Offset(size.width / 2, 0f)
            )
        }
        
        // 这里添加你的界面内容
        Text(
            text = "你的界面内容",
            color = Color.Black,
            fontSize = 20.sp,
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

方案二：使用Modifier.drawBehind绘制 #

无需单独使用Canvas，直接在布局背景上绘制圆形：

@Composable
fun HalfCircleBackgroundScreen() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFF44336))
            .drawBehind {
                val circleDiameter = size.width * 2
                drawCircle(
                    color = Color.White,
                    radius = circleDiameter / 2,
                    center = Offset(size.width / 2, size.height * 0.25f)
                )
            },
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "你的界面内容",
            color = Color.Black,
            fontSize = 20.sp
        )
    }
}

关键说明 #

• 两种方案都还原了XML的效果：圆形宽度为屏幕的2倍，顶部对齐屏幕高度25%的位置，仅显示下半部分半圆作为背景。
• 可根据需求调整圆形颜色、直径比例、圆心位置，适配不同界面样式。
• 如果需要复杂形状，可自定义Shape配合Modifier.clip实现，但当前场景直接绘制圆形最简洁。

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