如何在Jetpack Compose中实现符合预期的自定义半椭圆形形状

你当前使用RoundedCornerShape无法达到预期效果，是因为当设置的圆角半径超过控件高度的一半时，Compose会自动将圆角半径限制为控件高度的一半，无法形成完整的半圆底部。要实现这种效果，需要自定义Shape来精确绘制路径。

自定义半圆底部Shape #

class SemiOvalShape : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            // 从左上角起始点开始
            moveTo(0f, 0f)
            // 绘制顶部直线到右上角
            lineTo(size.width, 0f)
            // 绘制右侧垂直线到下半区域起点
            lineTo(size.width, size.height / 2)
            // 绘制下半部分的半圆（从右向左的圆弧）
            arcTo(
                rect = Rect(0f, 0f, size.width, size.height),
                startAngleDegrees = 0f,
                sweepAngleDegrees = 180f,
                forceMoveTo = false
            )
            // 绘制左侧垂直线回到起始点
            lineTo(0f, size.height / 2)
            // 闭合路径
            close()
        }
        return Outline.Generic(path)
    }
}

在Compose中使用自定义Shape #

@Composable
fun SemiOvalShapeDemo() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
    ) {
        Box(
            modifier = Modifier
                .fillMaxHeight(0.4f)
                .fillMaxWidth()
                .clip(SemiOvalShape())
                .border(2.dp, Color.Red)
                .background(Color.Blue)
        )
    }
}

代码说明 #

• 自定义SemiOvalShape通过Path精确规划绘制路径：先完成顶部和右侧的直线绘制，再用arcTo生成下半部分的半圆，最后闭合路径形成完整形状。
• 使用时将clip修饰符的参数替换为自定义的SemiOvalShape即可，同时把原代码中的.fillMaxSize(1.0f)改为.fillMaxWidth()，避免不必要的尺寸冲突。

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