HarmonyOS 鸿蒙Next沉浸光感效果该如何模拟

HarmonyOS 鸿蒙Next沉浸光感效果该如何模拟 沉浸光感效果该怎么做出官方的效果？API23相关的文档怎能看不了？

7 回复

开发者您好，当前仅部分组件比如HdsNavigation适配了新材质，基础组件使用新材质目前正在开发中，后续可以持续关注HarmonyOS更新。参考沉浸光感。（以上参考链接为API23文档链接，已在为您申请查看API23文档权限，可明日查看。）

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


好的，谢谢，

感谢您的支持。如果仍然无法解决您的问题，请及时反馈。

您好，相关文档需申请权限，请发起工单获取

沉浸光感，这里可以提前看：

导航条这种光影效果是怎么做出来的。

沉浸光感效果可通过ArkUI的backdropBlur、.shadow、.linearGradient与animate动画配合模拟。使用stack叠加半透明层，动态调整模糊半径与渐变光照位置即可实现。

鸿蒙 Next 没有 Android 的 API 23 概念（那是安卓版本号）。HarmonyOS 对应的 API 版本为 API 12+（如 API 12/13），对应文档可在官网 developer.huawei.com 查看。

实现官方“沉浸光感”效果，关键是全域模糊与色彩融合，常用方式：

  • 使用 BlendEffect + brightness / saturation 组合，配合图像（建议模糊处理的背景图）生成光感混合。
  • 利用 backgroundBlurStyle 属性设置组件级模糊（如 BlurStyle.Thin 或自定义 BlurStyleOptions）。
  • 若需动态光源模拟，则在 BlendEffect 中叠加径向渐变或亮部滤色，参考 modifier.blendMode(BlendMode.PLUS_LIGHTER)。

示例代码片段：

@Entry
@Component
struct ImmersiveGlow {
  build() {
    Stack() {
      // 底部模糊内容源（例如一个模糊处理过的图片/渐变）
      Image($r('app.media.bg_blured'))
        .blur(20)
        .brightness(1.2)
      // 混合效果叠加
      Column()
        .width('100%').height('100%')
        .backgroundBlurStyle(BlurStyle.Thin)
        .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
        .brightness(1.1)
    }
  }
}

若准确复刻官网 Demo 光效，直接参考其提供的场景化 EffectComponent 与组合规范即可，文档路径：设计指南 > 动效 > 沉浸式光感。

回到顶部