灵感源自https://juliensalvi.medium.com/custom-shape-with-jetpack-compose-1cb48a991d42的定制形状
它是添加直线和圆弧路径的扩展。
对于变换，它只是y轴上的旋转https://developer.android.com/jetpack/compose/graphics/draw/modifiers
圆形边框和背景的自定义形状沿着在y轴上旋转的图形层。

class CustomCardShape(private val radius: Float) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        return Outline.Generic(
            path = drawCardShape(size, radius)
        )
    }
}

带路径的形状

fun drawCardShape(size: Size, cornerRadius: Float): Path {
    return Path().apply {
        reset()
        // Top left arc
        arcTo(
            rect = Rect(
                left = 0f,
                top = 0f,
                right = cornerRadius,
                bottom = cornerRadius
            ),
            startAngleDegrees = 180.0f,
            sweepAngleDegrees = 90.0f,
            forceMoveTo = false
        )
        lineTo(x = size.width - cornerRadius, y = 0f)
        // Top right arc
        arcTo(
            rect = Rect(
                left = size.width - cornerRadius,
                top = 0f,
                right = size.width,
                bottom = cornerRadius
            ),
            startAngleDegrees = 270.0f,
            sweepAngleDegrees = 90.0f,
            forceMoveTo = false
        )
        lineTo(x = size.width, y = size.height - cornerRadius)
        // Bottom right arc
        arcTo(
            rect = Rect(
                left = size.width - cornerRadius,
                top = size.height - cornerRadius,
                right = size.width,
                bottom = size.height
            ),
            startAngleDegrees = 0.0f,
            sweepAngleDegrees = 90.0f,
            forceMoveTo = false
        )
        lineTo(x = cornerRadius, y = size.height)
        // Bottom left arc
        arcTo(
            rect = Rect(
                left = 0f,
                top = size.height - cornerRadius,
                right = cornerRadius,
                bottom = size.height
            ),
            startAngleDegrees = 90.0f,
            sweepAngleDegrees = 90.0f,
            forceMoveTo = false
        )
        lineTo(x = 0f, y = cornerRadius)
        close()
    }
}

可组合的卡

Card(modifier = modifier
        .height(300.dp)
        .width(400.dp)
        .graphicsLayer {
            // pivot of where the rotation shud happen
            this.transformOrigin = TransformOrigin(0f, 0f)
            this.rotationY = 5f
        }.shadow(elevation = 4.dp, shape = CustomCardShape(80f),
            ambientColor  = Color(0xff2f5e9b),
            spotColor = Color(0xff2f5e9b)),
        border = BorderStroke(5.dp,Color(0xff5d6474)),
        backgroundColor = Color(0xff333d51),shape = CustomCardShape(80f)){

    }

结果

上面的内容可能与屏幕截图中的内容不完全一样，但是您可以使用值来获得您想要的内容。

你也可以这样做，没有必要创建自定义形状

@Composable
fun CustomCard() {

    Card(
        modifier = Modifier
            .height(300.dp)
            .width(600.dp)
            .padding(20.dp)
            .graphicsLayer {
                this.transformOrigin = TransformOrigin(0f, 0f)
                this.rotationY = 7f
            },
        border = BorderStroke(3.dp, Color(0xff5d6474)),
        backgroundColor = Color(0xff333d51), shape = RoundedCornerShape(80f)
    ) {

    }

}

在图形层中，只旋转y轴。