如何为Jetpack Compose分段难度仪表实现拱形自定义形状？

我正在开发一个项目，希望优化用户UI体验。现有一个三段式Composable难度仪表，以绿、黄、红三色分别代表不同难度等级，当前样式为平直状态，希望修改为向上拱起的样式。

尝试过用自定义形状、贝塞尔曲线并通过Modifier设置clip shape和背景，但均未成功。请问如何修改该Composable Row实现拱形效果？是否必须使用图片或图标来实现？

当前仪表代码：

Card(
    shape = RoundedCornerShape(5.dp),
    modifier = Modifier
) {
    Row(
        modifier = Modifier
    ){
        Image(
            painter = Color.Green,
            contentDescription = null,
            modifier = Modifier
                .height(12.dp)
                .width(30.dp)
        ) // Low
        Image(
            painter = Color.Yellow,
            contentDescription = null,
            modifier = Modifier
                .height(12.dp)
                .width(30.dp)
                .padding(horizontal = 2.dp)
        ) // Medium
        Image(
            painter = Color.Red,
            contentDescription = null,
            modifier = Modifier
                .height(12.dp)
                .width(30.dp)
        ) // High
    }
}

不需要依赖图片或图标，通过自定义Shape配合Modifier.clip()就能实现拱形效果。下面提供两种可行方案：

方案一：整体拱形+分段渐变（推荐） #

给整个容器设置自定义拱形形状，再用线性渐变实现三段颜色区分，代码更简洁：

Card(
    shape = RoundedCornerShape(5.dp),
    modifier = Modifier.padding(16.dp)
) {
    val totalWidth = 30.dp * 3 + 4.dp // 三段宽度+中间padding总和
    val archHeight = 8.dp // 拱形凸起的高度
    val gradientBrush = Brush.linearGradient(
        colors = listOf(Color.Green, Color.Green, Color.Yellow, Color.Yellow, Color.Red, Color.Red),
        stops = listOf(0f, 30f/totalWidth.value, 30f/totalWidth.value, (30+2+30)/totalWidth.value, (30+2+30)/totalWidth.value, 1f)
    )

    Box(
        modifier = Modifier
            .size(totalWidth, 12.dp + archHeight)
            .clip(ArchShape(archHeight.toPx()))
            .background(gradientBrush)
    )
}

// 自定义向上拱起的形状
class ArchShape(private val archHeight: Float) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            // 起点：左下角
            moveTo(0f, size.height)
            // 贝塞尔曲线绘制拱起的底边
            quadraticBezierTo(
                size.width / 2, size.height - archHeight,
                size.width, size.height
            )
            // 闭合路径：右下角→右上角→左上角→左下角
            lineTo(size.width, 0f)
            lineTo(0f, 0f)
            close()
        }
        return Outline.Generic(path)
    }
}

方案二：分段弧形拼接 #

给每个颜色段设置对应的局部弧形形状，拼接成整体拱形，适合需要单独调整各段弧度的场景：

Card(
    shape = RoundedCornerShape(5.dp),
    modifier = Modifier.padding(16.dp)
) {
    val archHeight = 8.dp
    Row(
        modifier = Modifier.height(12.dp + archHeight)
    ) {
        // 左侧绿色段：左平直、右拱起
        Box(
            modifier = Modifier
                .size(30.dp, 12.dp + archHeight)
                .clip(LeftArchShape(archHeight.toPx()))
                .background(Color.Green)
        )
        Spacer(modifier = Modifier.width(2.dp))
        // 中间黄色段：左右都拱起
        Box(
            modifier = Modifier
                .size(30.dp, 12.dp + archHeight)
                .clip(MiddleArchShape(archHeight.toPx()))
                .background(Color.Yellow)
        )
        Spacer(modifier = Modifier.width(2.dp))
        // 右侧红色段：左拱起、右平直
        Box(
            modifier = Modifier
                .size(30.dp, 12.dp + archHeight)
                .clip(RightArchShape(archHeight.toPx()))
                .background(Color.Red)
        )
    }
}

// 左侧段形状
class LeftArchShape(private val archHeight: Float) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            moveTo(0f, size.height)
            quadraticBezierTo(size.width, size.height - archHeight, size.width, size.height)
            lineTo(size.width, 0f)
            lineTo(0f, 0f)
            close()
        }
        return Outline.Generic(path)
    }
}

// 中间段形状
class MiddleArchShape(private val archHeight: Float) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            moveTo(0f, size.height)
            quadraticBezierTo(size.width/2, size.height - archHeight, size.width, size.height)
            lineTo(size.width, 0f)
            lineTo(0f, 0f)
            close()
        }
        return Outline.Generic(path)
    }
}

// 右侧段形状
class RightArchShape(private val archHeight: Float) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            moveTo(0f, size.height)
            quadraticBezierTo(0f, size.height - archHeight, size.width, size.height)
            lineTo(size.width, 0f)
            lineTo(0f, 0f)
            close()
        }
        return Outline.Generic(path)
    }
}

注意事项 #

• 之前尝试失败大概率是因为没有给容器预留足够高度容纳拱形凸起（需把容器高度设为原高度+拱形高度），或者形状路径未正确闭合
• 方案一适合颜色段均匀的场景，维护成本更低；方案二更灵活，可单独调整每个段的弧度

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