使用 Jetpack Compose 实现部分图像的玻璃态/模糊效果？

Question

我需要制作一张卡片（或其他类型的布局），其设计如下所示。

问题：我不知道如何将这种玻璃态/模糊效果应用到文本所在的图像底部。

我将我在下面完成的代码留给您，以使其更容易。对于测试，我使用的是从 Google 获取的图像，我认为它没有影响。

@Preview
@Composable
fun BoxCard() {
    Card(elevation = 0.dp, shape = RectangleShape) {
        Box(contentAlignment = Alignment.BottomCenter) {
            Image(
                painter = painterResource(id = R.drawable.scale),
                contentDescription = null,
                contentScale = ContentScale.Fit
            )

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(45.dp)
                    .background(Color.White)
            ) {
                Column(modifier = Modifier.padding(horizontal = 12.dp, vertical = 4.dp)) {
                    Text(text = "Title Title")
                    Text(text = "Subtitle Subtitle")
                }
            }
        }
    }
}

Answer 1

代码结果：Github

要实现这种模糊效果：

• layer1：背景图片
• layer2：模糊背景图像并剪辑它

PS：您需要添加过滤器

提示：如何从设计师的角度获得玻璃态射效果：https://www.youtube.com/watch?v=PFADyVTX97w

    Box(modifier = Modifier) {
    // Background image
    Image(painter = painterResource(id = R.drawable.a), contentDescription = null)
    
    val source = ImageBitmap.imageResource(id = R.drawable.a).asAndroidBitmap()
    
    // Blur effect, Backward compatibility
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
      val blurredBitmap = legacyBlurImage(
        source = source,
        blurRadio = 25f,
//        blurLayer = 5 // Todo: if more blur needed, uncomment and tweak it
      )
      BlurImage(
        bitmap = blurredBitmap,
        modifier = Modifier
      )
    } else {
      BlurImage(
        bitmap = source,
        modifier = Modifier.blur(radius = 10.dp, edgeTreatment = BlurredEdgeTreatment.Rectangle)
      )
    }
  }

@Suppress("DEPRECATION")
@Composable
private fun legacyBlurImage(
  source: Bitmap,
  blurRadio: Float = 25f,
  blurLayer: Int = 1,
): Bitmap {
  val bitmap = source.copy(Bitmap.Config.ARGB_8888, true)
  val renderScript = RenderScript.create(LocalContext.current)
  for (i in 0 until blurLayer) {
    val bitmapAlloc = Allocation.createFromBitmap(renderScript, bitmap)
    ScriptIntrinsicBlur.create(renderScript, bitmapAlloc.element).apply {
      setRadius(blurRadio)
      setInput(bitmapAlloc)
      forEach(bitmapAlloc)
    }
    bitmapAlloc.copyTo(bitmap)
  }
  renderScript.destroy()
  return bitmap
}

省略形状和滤镜：

@Composable
private fun BlurImage(
  modifier: Modifier = Modifier,
  bitmap: Bitmap,
) {
  Image(
    bitmap = bitmap.asImageBitmap(),
    contentDescription = null,
    modifier = modifier
      .padding(16.dp)
      .clip(CurvedBorder(cornerRadius = 24.dp))
      .drawWithCache {
        onDrawWithContent {
          // ... maybe shadow filter
          // Content
          this.drawContent()
          // ... light filter on top of the blur
        }
      }
  )
}

Answer 2

有模糊修改器，但仅适用于 Android 12 及更高版本。

Modifier.blur(radius = 4.dp)