一套代码多端通用Compose 背景模糊库 Haze 实战【免费下载链接】hazeBackground blurring for Compose Multiplatform / Jetpack Compose项目地址: https://gitcode.com/gh_mirrors/ha/hazeHaze 是一个面向 Compose Multiplatform 和 Jetpack Compose 的背景模糊库同一份代码可以在 Android、iOS、桌面和 Web 上运行。它适合已经会写基础 Compose、想给卡片、弹窗或导航栏加一层毛玻璃的开发者。读完本文你能把依赖接进工程、跑通第一个模糊效果并知道关键参数怎么调。效果一览能做出哪些模糊️ 模糊强度、色调与边缘都可以单独控制同一组参数在明暗两套主题下都成立。对帧率敏感的场景库内置了输入缩放策略在不明显损失观感的前提下降低开销。最小集成Compose 模糊效果怎么接入 先加依赖。下面的片段来自示例工程直接放进build.gradle.kts就能用dependencies { // 核心库 api(projects.haze) // 模糊效果 api(projects.hazeBlur) // 预设材质 api(projects.hazeMaterials) }把核心库、模糊模块和预设材质三个模块加进工程。再写一个最小示例把需要模糊的内容包进HazeEffectHazeEffect( style HazeStyle( blurRadius 16.dp, tint Color(0x80FFFFFF), ) ) { Text(这段内容背后会被虚化) }一段内容加一个 style模糊效果即生效。平台风格预设Cupertino 与 Fluent 材质不想自己调参时可以直接套用按平台设计规范整理的材质。Cupertino 风格模糊写法Cupertino 材质按厚度分档从 UltraThin 到 Thick 逐层加厚CupertinoMaterials.UltraThin { Text(Cupertino 内容) }套用 iOS 风格中最薄的一档材质。Fluent 风格模糊写法Fluent 材质提供亚克力Acrylic与云母Mica两类对应 Windows 的视觉语言FluentMaterials.AcrylicDefault { Text(Fluent 内容) }套用 Fluent 默认的亚克力材质。自定义你的风格调参数 想要自己的观感时核心就这几个参数blurRadius模糊半径值越大背景越糊alpha整体透明度越小越通透tint色调覆盖改变模糊区域的底色HazeStyle( blurRadius 24.dp, // 半径更大模糊更强 alpha 0.7f, // 半透明 tint Color(0x80000000), // 深色偏色 )三个参数分别控制强度、透度与底色。另外库还支持渐进式模糊模糊强度可以随位置变化做出边缘由实到虚的过渡效果。实践建议性能与注意点⚡ 模糊是重绘开销较大的效果上线前留意这几点半径按需取值过大既费性能肉眼也看不出差别列表滚动等高频场景考虑临时调低强度或关闭效果用HazeSourceNode管理模糊源控制源的更新频率优先从预设材质起步再局部微调个别参数从依赖到第一个模糊效果上面的代码可以直接贴进工程验证。完整参数说明见 docs/blur/可交互的场景参考 sample/shared/。跑通之后挑一个离你设计最近的材质开始改参数就行。【免费下载链接】hazeBackground blurring for Compose Multiplatform / Jetpack Compose项目地址: https://gitcode.com/gh_mirrors/ha/haze创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考