HarmonyOS 鸿蒙Next中关于沉浸光感视效适配问题

HarmonyOS 鸿蒙Next中关于沉浸光感视效适配问题 如何完美适配沉浸光感视效的上下两端的渐变模糊效果（如图）？https://developer.huawei.com/consumer/cn/doc/design-guides/immersivelight-0000002612101053


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

6 回复

开发者您好，从6.1.0(23) 版本开始，新增支持HDS组件的沉浸光感材质能力；从API版本26.0.0开始，新增ArkUI沉浸光感，两者区别：

  • HDS组件的沉浸光感：支持HDS导航和HDS底部页签两个组件的沉浸光感能力，开发者可以通过TitleBarStyleOptions或HdsTabsFloatingStyle的systemMaterialEffect设置沉浸光感视效。
  • ArkUI沉浸光感：支持Button、Column、Row等ArkUI组件设置沉浸光感视效，及自定义材质样式、交互形变、光感反馈等效果，支持应用级开启和组件级开启。

您可以根据实际需求选择，如果应用使用HDS导航和底部页签组件，可以直接通过UI Design Kit快速开启沉浸光感；如果需要为更多组件或自定义布局添加沉浸光感效果，则使用ArkUI沉浸光感。

参考文档：

  1. HDS导航和HDS底部沉浸光感
  2. ArkUI沉浸光感

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


尊敬的开发者，您好，
1、通过HdsNavigation或HdsNavDestination的titleBar属性，可以配置标题栏的滚动效果与材质效果
2、底部导航适配可以设置barOverlap(true)以启用悬浮模糊背景，通过barFloatingStyle配置悬浮样式
具体可以参考文档：沉浸光感适配方案

分层处理

这个效果可以分两层处理：

  1. 如果目标是完全贴近“沉浸光感”的上下边缘流光/遮罩效果，优先看 UI Design Kit/HDS 的 HdsVisualComponent。相关场景里有 DUAL_EDGE_FLOW_LIGHT_WITH_BACKGROUND_MASK，参数包含 backgroundMaskColors 以及两条 EdgeFlowLight，可用 HdsSceneController.setSceneParams 后通过 scene(…) 启动。

  2. 如果只是做静态或近似的上下渐变模糊，可以在页面内容上叠加顶部/底部遮罩层，组合 linearGradient、linearGradientBlur、backgroundBlurStyle/foregroundBlurStyle；全屏沉浸时再配合 expandSafeArea 或 ignoreLayoutSafeArea 让内容延伸到系统安全区。

实践上建议把光感层单独封装成覆盖层，pointerEvents 关闭或避免挡住点击；滚动页面时只更新内容，不频繁重建模糊层，否则容易有性能开销。

鸿蒙Next沉浸光感视效适配需基于ArkUI的节点容器和系统能力实现。使用windowStage.getMainWindow()设置全屏布局，调用setWindowLayoutFullScreen(true)启用沉浸。视效上通过setSpecificSystemBarEnabled控制状态栏与导航栏透明度，配合expandSafeArea扩展绘制区域。动态光照适配需监听onColorModeChange与onWindowSizeChange，结合blendMode与backgroundBlurStyle实现实时反馈。确保组件层级使用Stack管理，避免遮挡系统交互区。

实现沉浸光感渐变模糊，核心在于全屏布局 + 安全区适配 + 渐变遮罩叠加：

  1. 窗口全屏：在页面aboutToAppear中调用

    window.getLastWindow(this.getContext()).then(w => {
  w.setWindowLayoutFullScreen(true);
});

    让内容延伸至状态栏和导航栏区域。

  2. 安全区避让：业务内容使用.expandSafeArea([SafeAreaExtensionType.SYSTEM])或手动添加padding，避免关键控件被系统栏遮挡。

  3. 上下渐变模糊层：在根Stack中，于顶部和底部各覆盖一个半透明渐变层，用.backdropBlur()对背景实现模糊效果，再通过透明度渐变模拟“渐隐”的视觉过渡。

示例核心代码（Page页面内）：

Stack({ alignContent: Alignment.Top }) {
  // 业务内容
  YourContent().width('100%').height('100%')

  // 顶部渐变模糊
  Column()
    .width('100%')
    .height(128)
    .linearGradient({
      colors: [[Color.White, 0], [Color.White, 1]],
      angle: 180 // 上端实色，向下渐变为透明
    })
    .opacity(0.85)
    .backdropBlur(24)

  // 底部渐变模糊
  Column()
    .width('100%')
    .height(128)
    .linearGradient({
      colors: [[Color.White, 0], [Color.White, 1]],
      angle: 0   // 下端实色，向上渐变为透明
    })
    .opacity(0.85)
    .backdropBlur(24)
    .align(Alignment.Bottom)
}

需根据实际设计稿调整渐变角度、高度和模糊强度。若需精确匹配真机效果，可动态获取状态栏高度并设置渐变高度（如getStatusBarHeight()）。

回到顶部