Jetpack Compose中如何合并Shape实现二次Clip效果适配M3 Shapes

1. 是否可通过合并两个Shape实现？ #

可以，但Compose没有提供直接合并Shape的API，需要你自定义Shape类，在内部组合两个目标Shape的Outline逻辑。本质上这和直接操作Outline的思路一致，只是把组合逻辑封装在了Shape层面。

2. 是否可通过合并两个Outline实现？ #

完全可以，这是实现这类组合形状的核心思路。Outline作为Shape的输出结果，支持通过Path运算来合并：

• 先获取两个原始Shape对应的Outline
• 将Outline转换为Path
• 使用Path.op()方法通过交集、并集、差集等运算得到组合后的Path
• 最后将组合后的Path包装成Generic Outline返回

3. 若上述方式不可行，该如何创建此自定义Shape？ #

直接自定义Shape类，重写createOutline方法手动构建组合后的形状逻辑，以下是示例代码（假设两次clip是取两个形状的交集）：

class CombinedShape(
    private val firstShape: Shape,
    private val secondShape: Shape
) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        // 获取两个Shape对应的Outline
        val outline1 = firstShape.createOutline(size, layoutDirection, density)
        val outline2 = secondShape.createOutline(size, layoutDirection, density)

        // 将Outline转换为Path
        val path1 = outlineToPath(outline1)
        val path2 = outlineToPath(outline2)

        // 计算两个Path的交集（可根据实际需求替换为Union/Difference等）
        val combinedPath = Path().apply {
            op(path1, path2, PathOperation.Intersect)
        }

        return Outline.Generic(combinedPath)
    }

    private fun outlineToPath(outline: Outline): Path {
        return when (outline) {
            is Outline.Rounded -> Path().apply { addRoundRect(outline.roundRect) }
            is Outline.Rectangle -> Path().apply { addRect(outline.rect) }
            is Outline.Generic -> outline.path
        }
    }
}

使用时，直接将这个自定义Shape传入M3的Shapes配置即可：

val appShapes = Shapes(
    small = CombinedShape(RoundedCornerShape(8.dp), CutCornerShape(4.dp)),
    // 按需配置其他尺寸的Shape
)

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