Jetpack Compose 毛玻璃背景模糊怎么实现？Haze 背景模糊库完整解析

Jetpack Compose 毛玻璃背景模糊怎么实现Haze 背景模糊库完整解析【免费下载链接】hazeBackground blurring for Compose Multiplatform / Jetpack Compose项目地址: https://gitcode.com/gh_mirrors/ha/hazeHaze 是面向 Jetpack Compose 和 Compose Multiplatform 的背景模糊库用HazeEffect包一层内容就能得到毛玻璃效果。同一套实现可跑在 Android、iOS 和桌面端三端共用同一份代码。什么时候需要毛玻璃想象一个视频播放器页面底部压着一条磨砂控制面板上面放播放按钮和进度条。背景是快速变化的视频帧纯半透明色会显得闷、内容发灰全透明又让文字在动态背景上很难读。这时该用模糊背景看得见、看不清上面的文字保持可读界面也有层次。Haze 就是为这类需求做的。它一次实现、三端Android、iOS、桌面可跑不用为每个平台单独换实现API 本身很简单把内容包进HazeEffect即可性能上可控用HazeSourceNode声明取样来源、管理其刷新避免白算模糊不想自己调参时它还内置了 iOS 和 Windows 两套系统风格的预设材料。三行代码加上模糊背景在build.gradle.kts中引入haze、hazeBlur、hazeMaterials模块即可。最基础的用法把内容包进HazeEffect传入一个HazeStyle。HazeEffect( style HazeStyle( blurRadius 16.dp, alpha 0.7f, tint Color(0x66FFFFFF), ) ) { Text(播放器标题) }Cupertino 还是 Fluent 风格预设怎么选看你的界面要对齐哪种视觉语言Cupertino 系iOS 观感。CupertinoMaterials提供 UltraThin 等由薄到厚的层级适合同 iOS 原生磨砂语言保持一致的场景。Fluent 系Windows 观感。FluentMaterials提供 AcrylicDefault 等丙烯酸材质适合桌面端应用走 Fluent Design 风格。完全自定义直接写HazeStyleblurRadius、alpha、tint自己填适合设计稿没有任何现成系统风格可对齐的情况。blurRadius、alpha、tint 参数速览参数作用调参方向blurRadius背景模糊半径越大越糊、开销越高背景是文字时 10–24.dp 通常够用alpha模糊层透明度越小越透、背景越可见越大表面越实tint叠加在模糊层上的颜色控制色调与明暗常用来统一主题色三个参数覆盖大多数场景效果不对时优先动它们。⚠️ 常见坑与避法半径拉得过大blurRadius给到上百 dp 不会更好看只会吃掉 GPU 和帧率。半径控制在合理区间用中低端真机验证。列表滚动时模糊不停滚动中每帧都参与模糊计算容易掉帧。滚动期间直接停用模糊效果停下再恢复。模糊源没管理不声明来源时模糊会盲目取样。用HazeSourceNode把真正要取样的节点包起来并控制其刷新HazeSourceNode( state hazeState, key videoArea, ) { // 需要被模糊取样的区域如视频播放区 }接下来看什么完整 API 与架构说明见 官方文档可运行的示例在 sample 目录。【免费下载链接】hazeBackground blurring for Compose Multiplatform / Jetpack Compose项目地址: https://gitcode.com/gh_mirrors/ha/haze创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考