如何使用Jetpack Compose与Coil实现图片的Glassmorphism（毛玻璃）效果

嘿，刚好我之前做过类似的玻璃态卡片效果，这就给你一步步拆解怎么用Jetpack Compose + Coil实现～

首先，我们的核心思路是层叠布局：用一张网络图片做底层背景，在它上方叠加一个带有模糊、半透明效果的卡片，最后在卡片上放置文本或其他组件。

第一步：确认Coil依赖（如果你还没配置的话） #

确保你的项目里已经添加了Coil的Compose依赖，在build.gradle（Module级别）里：

implementation("io.coil-kt:coil-compose:2.4.0")
// 版本可以根据最新稳定版调整

第二步：完整代码实现 #

下面是可直接复用的代码示例，我会逐段解释：

@Composable
fun GlassmorphismCardExample() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center // 让卡片居中显示
    ) {
        // 1. 底层：用Coil加载网络背景图
        AsyncImage(
            model = "https://your-image-url-here.com/photo.jpg", // 替换成你的图片链接
            contentDescription = "背景图片",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop, // 让图片铺满容器，裁剪多余部分
            // 可选：添加加载中和错误状态的占位图
            placeholder = painterResource(R.drawable.loading_placeholder),
            error = painterResource(R.drawable.error_placeholder)
        )

        // 2. 上层：玻璃态卡片
        Card(
            modifier = Modifier
                .size(320.dp, 200.dp) // 卡片的尺寸，按需调整
                .graphicsLayer {
                    blurRadius = 16f // 模糊半径，数值越大模糊效果越强
                },
            shape = RoundedCornerShape(16.dp), // 圆角，增强柔和感
            // 半透明背景色：这里用白色调，alpha值控制透明度
            colors = CardDefaults.cardColors(
                containerColor = Color.White.copy(alpha = 0.2f)
            ),
            // 半透明边框：模拟玻璃的边缘质感
            border = BorderStroke(1.dp, Color.White.copy(alpha = 0.3f))
        ) {
            // 3. 卡片内部内容：文本或其他组件
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(24.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Glassmorphism 示例",
                    fontSize = 24.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.Black.copy(alpha = 0.8f) // 深色半透明，保证可读性
                )
                Text(
                    text = "基于Jetpack Compose + Coil实现",
                    fontSize = 16.sp,
                    color = Color.Black.copy(alpha = 0.6f),
                    modifier = Modifier.padding(top = 8.dp)
                )
            }
        }
    }
}

关键细节说明 #

• 模糊效果实现：通过graphicsLayer { blurRadius = 16f }让卡片区域模糊下层的图片，这是Compose实现背景模糊最直接的方式。
• 玻璃质感优化：半透明的背景色+半透明边框，是玻璃态设计的核心，你可以根据图片色调调整背景色（比如换成浅灰、淡蓝）和alpha值。
• Coil加载优化：contentScale = ContentScale.Crop保证图片铺满容器，添加placeholder和error能提升用户体验。

自定义调整建议 #

• 想要更强的模糊效果：增大blurRadius的数值（比如20f）。
• 调整卡片形状：修改RoundedCornerShape的参数，甚至换成CircleShape。
• 添加阴影：可以给Card加上shadow modifier，但注意半透明背景下阴影效果会比较微妙，需要调整阴影的alpha值。

备注：内容来源于stack exchange，提问作者Kerim Bora