Cloudy: Jetpack Compose 模糊效果库技术文档

Cloudy: Jetpack Compose 模糊效果库技术文档

Cloudy ☁️ Jetpack Compose blur effect library, which falls back onto a CPU-based implementation to support older API levels. 项目地址: https://gitcode.com/gh_mirrors/cl/Cloudy

Cloudy 是一个专为 Jetpack Compose 设计的模糊效果库，它通过CPU实现回退来支持Android 12以下版本的模糊效果。此库旨在提供简便的方式来在您的应用中实现图片和界面元素的模糊效果，即便是在不支持直接模糊API的老版Android系统上。

安装指南

要将Cloudy添加到您的项目中，您需要遵循以下步骤：

Maven 中央仓库

直接在模块的build.gradle.kts文件中的dependencies块加入以下依赖：

dependencies {
    implementation("com.github.skydoves:cloudy:0.2.0")
}

如果您正在使用Version Catalog管理依赖，请在libs.versions.toml文件中配置：

[versions]
cloudy = "0.2.0"

[libraries]
compose-cloudy = { module = "com.github.skydoves:cloudy", version.ref = "cloudy" }

之后，在您的构建脚本中引用这个库。

使用Version Catalog方式

在模块的build.gradle.kts中添加对应的依赖：

dependencies {
    implementation(libs.compose.cloudy)
}

项目使用说明

基础使用

应用模糊效果非常简单，只需在需要模糊的组件上添加Modifier.cloudy()：

Text(
    modifier = Modifier.cloudy(),
    text = "这行文本是模糊的"
)

调整模糊程度

您可以调整radius参数来改变模糊的程度：

Column(modifier = Modifier.cloudy(radius = 15)) {
    // 内容...
}

监听模糊状态变化

云雾化状态可以通过onStateChanged监听，获取CloudyState来响应模糊效果的变化：

GlideImage(
    modifier = Modifier.cloudy(
        radius = 25,
        onStateChanged = { state ->
            // 根据状态进行处理
        }
    )
    // 其他配置...
)

响应式布局中的模糊

对于列表或网格中的元素，确保一致性和性能，应该使用图形层(GraphicsLayer)：

val graphicsLayer = rememberGraphicsLayer()

// 在 LazyVerticalGrid 或其他可滚动组件中使用
HomePoster(graphicsLayer = graphicsLayer, poster = item)

其中HomePoster是一个假设的组件，展示了如何传递和利用图形层。

与网络图片结合

结合Landscapist库，轻松实现在加载网络图片时应用模糊效果，详情见其Transformation部分。

支持与关注

如果发现Cloudy对您的项目有帮助，请点击项目页面上的星标给予支持，并关注作者skydoves以获取更多创新作品！

---

以上就是Cloudy的安装指南、基本使用、API详细说明以及如何维持项目更新的一系列文档。祝您使用愉快！

Cloudy ☁️ Jetpack Compose blur effect library, which falls back onto a CPU-based implementation to support older API levels. 项目地址: https://gitcode.com/gh_mirrors/cl/Cloudy