HarmonyOS 鸿蒙Next沉浸光感适配

HarmonyOS 鸿蒙Next沉浸光感适配 大佬们谁知道能把这个图1dock栏的沉浸光感调成图2应用商城这种透亮的感觉，总感觉自己的差那么点意思


更多关于HarmonyOS 鸿蒙Next沉浸光感适配的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

实现看起来应该差不多，重要的是后边的背景图，悬浮在背景图上的效果不一样。

更多关于HarmonyOS 鸿蒙Next沉浸光感适配的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


从6.1.0(23) 版本开始，新增支持HDS组件的沉浸光感材质能力。

  • HDS导航：通过设置TitleBarStyleOptions的systemMaterialEffect参数，可为标题栏按钮设置沉浸光感视效。
  • HDS底部页签：通过设置HdsTabsFloatingStyle的systemMaterialEffect参数，可为底部页签设置沉浸光感视效。

只有这两个系统组件啊！

只要你用的是它就没问题啊！

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17，

把builder颜色设置为白色就是一样的效果，

主要还是背景图片问题，看着效果差很多，换成同一个图片可能就一样了，可以试一下截个图看一下效果，

透明效果看来不痛，

不同的设备显示效果会有所差异，主要是调整透明的材质，

在 HarmonyOS Next 中，沉浸光感适配需通过 ArkTS 或 JS 实现。使用 windowStage 的 setPreferredOrientation 和 setWindowLayoutInDisplayCutout 接口管理全屏显示；利用 @ohos.multimedia.media 或 @ohos.sensor 获取环境光数据动态调整 UI 透明度或背景色。同时可通过 meta-data 配置 沉浸模式（如 immersive、leanback 等）实现状态栏/导航栏隐藏与透明。

鸿蒙Next的沉浸光感差异主要源于模糊材质饱和度和亮度参数不同。应用商城的透亮效果是拉高了 .backdropBlur 的饱和度和亮度混合值。

直接调整 Dock 栏的模糊参数即可：

// Dock栏组件内
.blur(8) // 基础模糊值
.backdropBlur(20) // 背景模糊强度  
.brightness(1.2) // 亮度提升，关键参数
.saturate(1.8) // 饱和度增强，让颜色更通透

核心是 brightness 和 saturate 的组合，应用商城那种透感通常亮度在1.1-1.3，饱和度在1.5-2.0区间。试试微调这两个值，能匹配出你想要的通透光感。

回到顶部