如何在Jetpack Compose中创建指定自定义形状并添加阴影？

一、实现自定义Shape #

直接通过Shape接口创建整体形状，替代多组件拼接的方案，性能更优且阴影效果可控。以下是适配你需求的自定义形状代码：

import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.density

class CustomOvalEndShape(private val ovalDiameter: Dp) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val ovalDiameterPx = with(density) { ovalDiameter.toPx() }
        val halfOvalWidth = ovalDiameterPx / 2

        return Outline.Generic(Path().apply {
            // 绘制顶部椭圆
            addOval(Rect(
                left = (size.width - ovalDiameterPx) / 2,
                top = 0f,
                right = (size.width + ovalDiameterPx) / 2,
                bottom = ovalDiameterPx
            ))
            // 绘制中间矩形（衔接上下椭圆）
            addRect(Rect(
                left = 0f,
                top = halfOvalWidth,
                right = size.width,
                bottom = size.height - halfOvalWidth
            ))
            // 绘制底部椭圆
            addOval(Rect(
                left = (size.width - ovalDiameterPx) / 2,
                top = size.height - ovalDiameterPx,
                right = (size.width + ovalDiameterPx) / 2,
                bottom = size.height
            ))
        })
    }
}

二、添加阴影并使用形状 #

通过shadow修饰符直接为自定义形状添加阴影，注意要保证shadow和background的形状参数一致，同时开启clip=true确保阴影正确贴合形状：

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Box(
    modifier = Modifier
        .size(200.dp, 320.dp) // 自定义组件尺寸
        .shadow(
            elevation = 10.dp, // 阴影高度
            shape = CustomOvalEndShape(ovalDiameter = 60.dp),
            clip = true,
            ambientColor = Color.Gray.copy(alpha = 0.5f),
            spotColor = Color.Gray.copy(alpha = 0.7f)
        )
        .background(Color.White, shape = CustomOvalEndShape(ovalDiameter = 60.dp))
) {
    // 这里添加你的内容组件
}

关键说明 #

• 自定义Shape通过Path将三个图形（上下椭圆+中间矩形）合并为一个整体，避免多组件拼接的层级冗余
• shadow修饰符的shape必须与background的shape完全一致，否则阴影会和背景形状不匹配
• 可通过调整ovalDiameter参数控制上下椭圆的大小，适配不同需求

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