Jetpack Compose中如何为使用ImageVector的Icon添加阴影/elevation效果

直接给Icon配置Modifier.shadow()会渲染矩形阴影的核心原因是：该修饰符基于组件的布局边界（默认是矩形）绘制阴影，不会识别ImageVector的矢量路径轮廓，因此无法贴合图标形状。
以下是两种可直接复用、适配所有ImageVector场景的实现方案： #

方案1：双层叠加实现（代码量最少，兼容性好） #

通过「底层偏移模糊的同形状图标作为阴影 + 顶层正常图标」的层级结构实现，不需要手动解析矢量路径，所有ImageVector资源都能直接生效：

/**
 * 带凸起阴影效果的IconButton，适配ImageVector类型图标
 * @param imageVector 矢量图标资源
 * @param contentDescription 无障碍描述
 * @param iconTint 图标本身颜色
 * @param shadowColor 阴影颜色
 * @param elevation 阴影高度，值越大阴影越扩散
 * @param shadowOffsetY 阴影纵向偏移量
 */
@Composable
fun ElevatedVectorIconButton(
    onClick: () -> Unit,
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    iconTint: Color = LocalContentColor.current,
    shadowColor: Color = Color.Black.copy(alpha = 0.2f),
    elevation: Dp = 3.dp,
    shadowOffsetY: Dp = 2.dp
) {
    IconButton(
        onClick = onClick,
        modifier = modifier
    ) {
        Box(contentAlignment = Alignment.Center) {
            // 渲染阴影层
            Icon(
                imageVector = imageVector,
                contentDescription = null,
                tint = shadowColor,
                modifier = Modifier
                    .offset(y = shadowOffsetY)
                    .graphicsLayer {
                        // Compose 1.6.0+ 支持BlurEffect，低版本可替换为setShadowLayer实现
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
                            renderEffect = BlurEffect(
                                radiusX = elevation.toPx(),
                                radiusY = elevation.toPx(),
                                edgeTreatment = BlurEdgeTreatment.ANTI_ALIAS
                            )
                        }
                    }
            )
            // 渲染顶层正常图标
            Icon(
                imageVector = imageVector,
                contentDescription = contentDescription,
                tint = iconTint
            )
        }
    }
}

调用示例：

ElevatedVectorIconButton(
    onClick = { /* 点击逻辑 */ },
    imageVector = Icons.Default.Favorite,
    contentDescription = "收藏",
    iconTint = Color.Red,
    elevation = 4.dp
)

方案2：自定义绘制矢量阴影（性能最优，无版本兼容问题） #

如果需要兼容更低版本Compose，或者对渲染性能要求更高，可以通过drawWithCache直接基于绘制层渲染原生阴影，不会产生额外的布局层级，阴影自动贴合矢量图标轮廓：

fun Modifier.vectorShadow(
    elevation: Dp,
    shadowColor: Int = Color.parseColor("#33000000"),
    offsetX: Dp = 0.dp,
    offsetY: Dp = 2.dp
) = this.drawWithCache {
    val paint = Paint().asFrameworkPaint().apply {
        isAntiAlias = true
        setShadowLayer(
            elevation.toPx(),
            offsetX.toPx(),
            offsetY.toPx(),
            shadowColor
        )
    }
    onDrawWithContent {
        drawIntoCanvas { canvas ->
            canvas.nativeCanvas.drawPaint(paint)
        }
        drawContent()
    }
}

使用时直接给Icon加该修饰符即可，不会出现矩形阴影问题。 #

实现效果参考：

注：如果使用的Compose版本低于1.6.0，方案1中的BlurEffect可以替换为自定义draw的模糊实现，或者直接使用方案2即可。

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