企业官网建设流程全解析

给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