如何在Jetpack Compose中创建指定形状的卡片？

根据你提供的形状样式，这里给出两种适配的实现方案，你可以根据实际效果选择：

方式一：顶部左右圆角、底部直角的形状 #

通过自定义Shape，使用GenericShape绘制路径来实现：

import androidx.compose.foundation.shape.GenericShape
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp

// 自定义顶部圆角形状，可传入圆角半径
fun TopRoundedShape(cornerRadius: Float): Shape {
    return GenericShape { size, _ ->
        val width = size.width
        val height = size.height
        val radius = cornerRadius

        // 从左下角开始绘制路径
        moveTo(0f, height)
        // 绘制底部直线到右下角
        lineTo(width, height)
        // 绘制右下角到右上角的圆角
        arcTo(
            rect = android.graphics.RectF(width - radius, 0f, width, radius),
            startAngle = 270f,
            sweepAngle = 90f,
            forceMoveTo = false
        )
        // 绘制顶部直线到左上角圆角起点
        lineTo(radius, 0f)
        // 绘制左上角圆角到左下角
        arcTo(
            rect = android.graphics.RectF(0f, 0f, radius, radius),
            startAngle = 180f,
            sweepAngle = 90f,
            forceMoveTo = false
        )
        // 闭合路径
        close()
    }
}

使用示例 #

在Compose组件中直接引用该形状，比如给Box设置背景：

Box(
    modifier = Modifier
        .size(200.dp, 120.dp)
        .background(
            color = Color(0xFF2196F3),
            shape = TopRoundedShape(cornerRadius = 24.dp.toPx())
        )
)

方式二：顶部半圆、底部平的形状 #

如果目标形状是顶部为完整半圆的样式，可使用以下自定义形状：

import androidx.compose.foundation.shape.GenericShape
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.LayoutDirection

fun TopSemiCircleShape(): Shape {
    return GenericShape { size, _ ->
        val width = size.width
        val height = size.height
        val semiCircleRadius = width / 2

        // 从左下角出发
        moveTo(0f, height)
        // 绘制底部直线到右下角
        lineTo(width, height)
        // 绘制顶部半圆（从右下角到左上角）
        arcTo(
            rect = android.graphics.RectF(0f, 0f, width, width),
            startAngle = 270f,
            sweepAngle = 180f,
            forceMoveTo = false
        )
        // 闭合路径回到左下角
        lineTo(0f, height)
        close()
    }
}

使用示例 #

Box(
    modifier = Modifier
        .size(200.dp, 120.dp)
        .background(
            color = Color(0xFF2196F3),
            shape = TopSemiCircleShape()
        )
)

你可以根据实际需求调整尺寸、圆角半径或圆弧参数，GenericShape支持完全自定义绘制路径，适配任意复杂形状。

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