如何在Jetpack Compose中绘制带图片和内部内容的弧形组件？

1. 修复弧形背景Shape #

原来的ZMTArcShape绘制了完整圆形，需要修改为顶部带半圆的矩形形状，匹配目标效果的弧形面板：

class ZMTArcShape : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density,
    ): Outline {
        val path = Path().apply {
            // 绘制矩形底部与两侧
            moveTo(0f, size.height)
            lineTo(size.width, size.height)
            lineTo(size.width, size.height / 2)
            // 绘制顶部半圆（圆心在宽度中点，半径为宽度的一半）
            addArc(
                oval = Rect(0f, 0f, size.width, size.width),
                startAngleDegrees = 180f,
                sweepAngleDegrees = 180f
            )
            lineTo(0f, size.height / 2)
            close()
        }
        return Outline.Generic(path)
    }
}

2. 添加头像布局并调整整体结构 #

在ZMTBottomSelector中添加横向排列的圆形头像，通过负偏移让头像覆盖在弧形上方，同时调整按钮位置：

@Composable
fun ZMTBottomSelector(modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .shadow(8.dp, clip = true, shape = ZMTArcShape())
            .background(color = Color.White)
            .fillMaxWidth()
            .height(220.dp) // 设置固定高度适配内容
    ) {
        // 横向排列头像
        Row(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .padding(top = (-30).dp), // 向上偏移，让头像部分覆盖弧形
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            // 替换为你的实际drawable资源
            repeat(3) {
                Image(
                    painter = painterResource(id = R.drawable.ic_your_avatar),
                    contentDescription = "选择头像",
                    modifier = Modifier
                        .size(60.dp)
                        .clip(CircleShape)
                        .border(2.dp, Color.White, CircleShape) // 白色边框增强视觉层次
                )
            }
        }

        Button(
            onClick = { /* 点击逻辑 */ },
            modifier = Modifier
                .align(Alignment.TopCenter)
                .padding(top = 80.dp), // 调整按钮到头像下方
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF2196F3))
        ) {
            Text(text = "Continuar", color = Color.White)
        }
    }
}

关键调整说明 #

• Shape修改：通过Path组合矩形与半圆，实现顶部弧形的面板背景，避免整圆导致的布局异常。
• 头像偏移：使用负top padding让头像向上移动，覆盖在弧形区域上方，还原目标效果的视觉层次。
• 视觉优化：给头像添加白色边框，与白色面板区分开，提升清晰度。

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