Jetpack Compose 中的模糊

Question

如何在 Jetpack Compose 中模糊背景或创建模糊叠加层？没有解决此主题的任何文档或资源。简单地说：我希望在 Jetpack Compose

中本地实现类似 this 的东西

Answer 1

这是 a feature that has been requested（在 Compose 1.1.0-alpha03 中实现，仅适用于 android 12 及更高版本），您可能想要加注星标。
这个想法是创建一个看起来像这样的模糊修改器：

Modifier.blur(radius = 16.dp)

Answer 2

在Jetpack Compose:1.1.0-alpha03中，你可以使用：

Modifier.blur(30.dp)

但仅在 Android 12 及更高版本上受支持。尝试在旧 Android 版本上使用此修改器将被忽略。

参考：Modifier.blur

Answer 3

对于 API12 之前的版本，您仍然可以使用 RenderScript（已弃用）或 RenderScript Intrinsics Replacement Toolkit。对于第一种方式：

val bitmap = BitmapFactory.decodeResource(
    LocalContext.current.resources,
    R.drawable.your_image
)
val rs = RenderScript.create(LocalContext.current)
val bitmapAlloc = Allocation.createFromBitmap(rs, bitmap)
ScriptIntrinsicBlur.create(rs, bitmapAlloc.element).apply {
    setRadius(BLUR_RADIUS)
    setInput(bitmapAlloc)
    forEach(bitmapAlloc)
}
bitmapAlloc.copyTo(bitmap)
rs.destroy()

第二次你必须添加 renderscript-toolkit 模块到你的项目中（看 here）然后使用：

val bitmap = BitmapFactory.decodeResource(
    LocalContext.current.resources,
    R.drawable.your_image
).let { Toolkit.blur(it, BLUR_RADIUS) }

终于可以像这样显示模糊的位图了：

Image(
    bitmap = bitmap.asImageBitmap(),
    "some description"
)

Jetpack Compose 中的模糊

Blur in Jetpack Compose

android

android-jetpack-compose