给Compose应用加毛玻璃Haze三步出效果实战【免费下载链接】hazeBackground blurring for Compose Multiplatform / Jetpack Compose项目地址: https://gitcode.com/gh_mirrors/ha/haze想让顶部导航栏有毛玻璃质感又不想手写 RenderEffect 和采样管线Haze 是个 Compose 背景模糊库一个 modifier 就能给内容加模糊Android、iOS、Desktop、Web 四端可用。❄️ 能力速览Haze 2.0 把效果拆成了模块用到什么拉什么不用的不占体积。维度说明平台AndroidAPI 1113 走最优渲染路径、Desktop (JVM)、iOS、Wasm/JS核心效果背景模糊为主可调 blurRadius、tint、noise支持渐进式渐变与 mask许可Apache-2.0现状当前发布 2.0.0-alpha04模块化新 APIalpha 阶段接口仍可能调整模块划分核心haze只提供基础设施模糊在haze-blur预设材质在haze-blur-materials。只做模糊的话至少拉前两个。底层是按平台优化过的 Kotlin 背景模糊管线Android 走 RenderNodeiOS/Desktop 走 Skia 着色器全程硬件加速。预设材质HazeMaterials/CupertinoMaterials/FluentMaterials三组对应 Material、iOS、Windows 三种风格都带明暗两套。HazeMaterials 五种厚度的毛玻璃明暗双主题跑通第一个效果加依赖、写一个 modifier、看效果就三步。第一步在build.gradle.kts里加依赖dependencies { implementation(dev.chrisbanes.haze:haze:2.0.0-alpha04) implementation(dev.chrisbanes.haze:haze-blur:2.0.0-alpha04) }第二步把内容包起来叠一层模糊val hazeState rememberHazeState() Box { Image( painter painter, contentDescription null, modifier Modifier.hazeSource(hazeState), ) Box( modifier Modifier.matchParentSize().hazeBlur( input HazeInput.Sources(hazeState), style HazeBlurStyle { blurRadius(20.dp) }, ), ) }第三步看屏幕下面的 Box 就是盖在图片上的 20dp 毛玻璃层。hazeSource标记模糊源hazeBlur是效果落点两者靠同一个hazeState关联源内容变化时模糊实时跟随。按场景实战给顶部导航栏加毛玻璃套路固定滚动容器标 source栏上贴模糊。Box { LazyColumn(Modifier.fillMaxSize().hazeSource(hazeState)) { /* 可滚动内容 */ } TopAppBar( modifier Modifier.hazeBlur( input HazeInput.Sources(hazeState), style HazeMaterials.thin(), ), ) }磨砂浮层压在正文上背景可辨认但读不清正是顶栏想要的层次thin()的半径会透出背景轮廓适合内容密集的列表页想更实一点就换regular()或thick()。给弹窗加毛玻璃背景弹窗自身的 Surface 必须先用半透明色否则不透明背景会挡住模糊要作用的对象。Dialog(onDismissRequest { showDialog false }) { Surface(color MaterialTheme.colorScheme.surface.copy(alpha 0.2f)) { Box( modifier Modifier.hazeBlur( input HazeInput.Sources(hazeState), style FluentMaterials.acrylicDefault(), ), ) } }FluentMaterials 的 acrylic 与 Mica 预设桌面弹窗常用这套同一份代码套在ModalBottomSheet内容上就是底部弹层效果仓库示例里有现成写法可以直接抄。⚙️ 进阶调参两个参数决定观感和帧率blurRadius与performanceMode。blurRadius值越大越糊。20dp 时背景基本读不清8dp 只留一点轮廓超过 32dp 后肉眼差异很小帧成本却明显上去。预设是可重放的 Style后写的生效HazeMaterials.thin().then { blurRadius(12.dp); noiseFactor(0f) }就能派生一个更薄、无颗粒感的版本不用重写整套参数。performanceMode 默认Adaptive自动调画质背景持续滚动、帧预算紧张时再手动降档Modifier.hazeBlur( input HazeInput.Sources(hazeState), style style, performanceMode HazePerformanceMode.Performance, )改完设置记得在真机上量一遍有明确收益才保留覆盖。⚠️ 避坑清单现象原因解法Android 11 及以下毛玻璃变成一层半透明黑API 30 以下默认关闭模糊回退为 scrim 遮罩Style 里写blurEnabled(true)启用实验性 RenderScript 路径老设备上模糊慢一拍、有拖影RenderScript 路径在后台线程处理会丢帧缩小模糊区域只给顶栏/弹层或降 performanceModeAndroid 12 上渐进式渐变开销大12/12L 靠多次绘制实现preferPerformance true回退到 mask 实现Haze 适合需要一份毛玻璃代码跨四端复用的 Compose 项目2.0 目前处于 alpha 阶段API 还可能变锁定版本号再上。细节看 docs/顶栏、弹窗、底部弹层的可运行实现都在 sample/。【免费下载链接】hazeBackground blurring for Compose Multiplatform / Jetpack Compose项目地址: https://gitcode.com/gh_mirrors/ha/haze创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 给Compose应用加毛玻璃：Haze三步出效果实战
给Compose应用加毛玻璃Haze三步出效果实战【免费下载链接】hazeBackground blurring for Compose Multiplatform / Jetpack Compose项目地址: https://gitcode.com/gh_mirrors/ha/haze想让顶部导航栏有毛玻璃质感又不想手写 RenderEffect 和采样管线Haze 是个 Compose 背景模糊库一个 modifier 就能给内容加模糊Android、iOS、Desktop、Web 四端可用。❄️ 能力速览Haze 2.0 把效果拆成了模块用到什么拉什么不用的不占体积。维度说明平台AndroidAPI 1113 走最优渲染路径、Desktop (JVM)、iOS、Wasm/JS核心效果背景模糊为主可调 blurRadius、tint、noise支持渐进式渐变与 mask许可Apache-2.0现状当前发布 2.0.0-alpha04模块化新 APIalpha 阶段接口仍可能调整模块划分核心haze只提供基础设施模糊在haze-blur预设材质在haze-blur-materials。只做模糊的话至少拉前两个。底层是按平台优化过的 Kotlin 背景模糊管线Android 走 RenderNodeiOS/Desktop 走 Skia 着色器全程硬件加速。预设材质HazeMaterials/CupertinoMaterials/FluentMaterials三组对应 Material、iOS、Windows 三种风格都带明暗两套。HazeMaterials 五种厚度的毛玻璃明暗双主题跑通第一个效果加依赖、写一个 modifier、看效果就三步。第一步在build.gradle.kts里加依赖dependencies { implementation(dev.chrisbanes.haze:haze:2.0.0-alpha04) implementation(dev.chrisbanes.haze:haze-blur:2.0.0-alpha04) }第二步把内容包起来叠一层模糊val hazeState rememberHazeState() Box { Image( painter painter, contentDescription null, modifier Modifier.hazeSource(hazeState), ) Box( modifier Modifier.matchParentSize().hazeBlur( input HazeInput.Sources(hazeState), style HazeBlurStyle { blurRadius(20.dp) }, ), ) }第三步看屏幕下面的 Box 就是盖在图片上的 20dp 毛玻璃层。hazeSource标记模糊源hazeBlur是效果落点两者靠同一个hazeState关联源内容变化时模糊实时跟随。按场景实战给顶部导航栏加毛玻璃套路固定滚动容器标 source栏上贴模糊。Box { LazyColumn(Modifier.fillMaxSize().hazeSource(hazeState)) { /* 可滚动内容 */ } TopAppBar( modifier Modifier.hazeBlur( input HazeInput.Sources(hazeState), style HazeMaterials.thin(), ), ) }磨砂浮层压在正文上背景可辨认但读不清正是顶栏想要的层次thin()的半径会透出背景轮廓适合内容密集的列表页想更实一点就换regular()或thick()。给弹窗加毛玻璃背景弹窗自身的 Surface 必须先用半透明色否则不透明背景会挡住模糊要作用的对象。Dialog(onDismissRequest { showDialog false }) { Surface(color MaterialTheme.colorScheme.surface.copy(alpha 0.2f)) { Box( modifier Modifier.hazeBlur( input HazeInput.Sources(hazeState), style FluentMaterials.acrylicDefault(), ), ) } }FluentMaterials 的 acrylic 与 Mica 预设桌面弹窗常用这套同一份代码套在ModalBottomSheet内容上就是底部弹层效果仓库示例里有现成写法可以直接抄。⚙️ 进阶调参两个参数决定观感和帧率blurRadius与performanceMode。blurRadius值越大越糊。20dp 时背景基本读不清8dp 只留一点轮廓超过 32dp 后肉眼差异很小帧成本却明显上去。预设是可重放的 Style后写的生效HazeMaterials.thin().then { blurRadius(12.dp); noiseFactor(0f) }就能派生一个更薄、无颗粒感的版本不用重写整套参数。performanceMode 默认Adaptive自动调画质背景持续滚动、帧预算紧张时再手动降档Modifier.hazeBlur( input HazeInput.Sources(hazeState), style style, performanceMode HazePerformanceMode.Performance, )改完设置记得在真机上量一遍有明确收益才保留覆盖。⚠️ 避坑清单现象原因解法Android 11 及以下毛玻璃变成一层半透明黑API 30 以下默认关闭模糊回退为 scrim 遮罩Style 里写blurEnabled(true)启用实验性 RenderScript 路径老设备上模糊慢一拍、有拖影RenderScript 路径在后台线程处理会丢帧缩小模糊区域只给顶栏/弹层或降 performanceModeAndroid 12 上渐进式渐变开销大12/12L 靠多次绘制实现preferPerformance true回退到 mask 实现Haze 适合需要一份毛玻璃代码跨四端复用的 Compose 项目2.0 目前处于 alpha 阶段API 还可能变锁定版本号再上。细节看 docs/顶栏、弹窗、底部弹层的可运行实现都在 sample/。【免费下载链接】hazeBackground blurring for Compose Multiplatform / Jetpack Compose项目地址: https://gitcode.com/gh_mirrors/ha/haze创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考