给Compose加模糊不用自己写：Haze 5分钟集成指南

给Compose加模糊不用自己写Haze 5分钟集成指南【免费下载链接】hazeBackground blurring for Compose Multiplatform / Jetpack Compose项目地址: https://gitcode.com/gh_mirrors/ha/haze列表滚起来背景一片死白整个界面看着像没做完。Haze 就是为 Compose Multiplatform 写的模糊效果库几行代码就能把背景变成真正的毛玻璃。️ 它长什么样先看效果卡片列表叠在图片上滚动顶部导航栏半透明光从背后透过来。这是导航栏、底部弹层、对话框这类界面最常见的材质外观。下图是列表叠在图片上的场景模糊区域跟着内容一起滚动背景始终虚化。Haze 是一个 Compose 视觉特效库专门解决背景模糊、颜色染色这类效果一套代码同时支持 Android、iOS、桌面和 Web 四个平台。三个核心能力跨端一次接入同一份代码在 Android、iOS、桌面、Web 上跑同一套逻辑不用为每个平台单独写模糊实现。跨端项目省下的就是这份重复劳动。两行修饰符出效果Haze 把模糊拆成两个角色一个 composable 声明我是被模糊的源另一个 composable 声明我来显示模糊结果。声明源 声明模糊两层用同一个状态串起来即可。内置两套平台材质不用自己死调参数Haze 直接给了 Apple 的 Cupertino 材质ultraThin、thin、regular、thick 四档和 Windows 的 Fluent 材质丙烯酸、云母调用函数即得对应风格。 从零到跑起来接入依赖Haze 按功能拆成了模块模糊相关的核心是haze-blur和材质模块。示例工程把它们写在sample/shared/build.gradle.kts你照抄即可dependencies { implementation(dev.chrisbanes.haze:haze-blur:version) // 模糊效果 implementation(dev.chrisbanes.haze:haze-blur-materials:version) // 预设材质 }跑通第一个模糊场景val hazeState rememberHazeState() Box { Image(painter, contentDescription null, modifier Modifier.hazeSource(hazeState)) // 标记这张图为模糊源 Box(modifier Modifier .matchParentSize() .hazeBlur( input HazeInput.Sources(hazeState), // 覆盖层从这里取样 style HazeBlurStyle { blurRadius(20.dp) }, ), ) }源层照常绘制原内容覆盖层绘制模糊结果两层靠hazeState关联。如果模糊的内容就是 composable 自己的内容用HazeInput.Content可以省掉源声明。换一种平台风格不想手调blurRadius时把style换成预设材质就行。以顶部导航栏为例TopAppBar( modifier Modifier.hazeBlur( input HazeInput.Sources(hazeState), style CupertinoMaterials.thin(), // 整行换成 Apple 的 thin 材质 ), )换成FluentMaterials.acrylicDefault()就变成 Windows 丙烯酸风格其余代码一行不动。如果你要渐变式模糊整块均匀模糊有时会显得呆板很多界面希望顶部更糊、往下逐渐变淡。Haze 支持渐进式模糊强度随位置变化val progressiveStyle HazeBlurStyle { progressive( HazeProgressive.verticalGradient( startIntensity 1f, // 顶部全模糊 endIntensity 0f, // 底部完全透出 ), ) }把这个progressiveStyle传给hazeBlur模糊区就会从顶部全糊渐变到底部透明接近系统级毛玻璃的观感。⚠️ 这些坑提前知道性能模式保持默认Haze 会自动平衡质量和开销别过早手动干预。滚动卡顿的机型上把性能模式调到Performance牺牲一点精细度换帧率。隐私敏感内容改用ClearWhenUnavailable保留策略源移除时不留残帧。只需要边缘变淡时优先写mask它比 progressive 更便宜。别在同一屏叠太多大面积模糊覆盖层每一层都有成本。接下来API 细节可以看 docs/blur/usage.md能直接跑的示例在sample/shared/目录里。下一步建议把跑通第一个模糊场景那段代码贴到一个有背景图的界面调blurRadius调到顺眼为止。【免费下载链接】hazeBackground blurring for Compose Multiplatform / Jetpack Compose项目地址: https://gitcode.com/gh_mirrors/ha/haze创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考