如何在Jetpack Compose中制作右上角圆角的卡片/容器

实现仅右上角圆角的容器非常简单，无需复杂自定义视图，直接借助Compose自带的API即可完成：

方法一：利用RoundedCornerShape重载参数 #

RoundedCornerShape支持单独指定每个角的圆角半径，只需设置topEnd参数就能实现仅右上角圆角的效果：

// 以Box容器为例，Card组件用法同理
Box(
    modifier = Modifier
        .size(width = 240.dp, height = 160.dp)
        .clip(RoundedCornerShape(topEnd = 16.dp)) // 仅设置右上角圆角
        .background(Color(0xFFF5F5F5))
) {
    // 容器内部内容，比如文本、图标等
    Text(
        text = "右上角圆角容器",
        modifier = Modifier.padding(16.dp),
        fontSize = 16.sp
    )
}

如果使用Card组件，直接给shape参数传入对应配置即可：

Card(
    shape = RoundedCornerShape(topEnd = 16.dp),
    modifier = Modifier.size(240.dp, 160.dp),
    elevation = 4.dp
) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("Card 示例", fontSize = 18.sp, fontWeight = FontWeight.Bold)
        Text("仅右上角有圆角", fontSize = 14.sp, color = Color.Gray)
    }
}

方法二：自定义Shape（适用于复杂定制需求） #

如果需要更特殊的形状逻辑（比如非对称圆角、自定义路径），可以创建自定义Shape类：

class TopRightRoundedShape(private val radius: Dp) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val pxRadius = with(density) { radius.toPx() }
        val path = Path().apply {
            moveTo(0f, size.height) // 起点：左下角
            lineTo(0f, 0f) // 直线到左上角
            lineTo(size.width - pxRadius, 0f) // 直线到右上角左侧
            // 绘制右上角圆弧
            arcTo(
                rect = Rect(
                    left = size.width - pxRadius,
                    top = 0f,
                    right = size.width,
                    bottom = pxRadius
                ),
                startAngleDegrees = 180f,
                sweepAngleDegrees = 90f,
                forceMoveTo = false
            )
            lineTo(size.width, size.height) // 直线到右下角
            close() // 闭合路径
        }
        return Outline.Generic(path)
    }
}

使用自定义Shape的方式和第一种一致：

Box(
    modifier = Modifier
        .size(240.dp, 160.dp)
        .clip(TopRightRoundedShape(16.dp))
        .background(Color(0xFFE3F2FD))
) {
    // 内部内容
}

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