HarmonyOS鸿蒙Next中沉浸光感顶部导航栏逐渐模糊怎么避让状态栏

这个现象更像是标题栏安全区策略和背景层没有对齐，不是单独加 Blank 高度就能解决。想做系统应用那种“内容延伸到状态栏，同时顶部随滚动逐渐模糊”的效果，我这边建议把三件事分开处理：背景层负责铺到状态栏，内容层用占位避开标题栏，HdsNavigation 只负责滚动联动和模糊。

可参考这个写法，重点是 bindToScrollable、GRADIENT_BLUR、maskExtraHeight，以及不要把标题栏初始/滚动后的背景配成白色：

import { HdsNavigation, ScrollEffectType } from '@kit.UIDesignKit';
import { LengthMetrics } from '@kit.ArkUI';

const TITLE_PLACEHOLDER: number = 112;

@Entry
@Component
struct DemoPage {
  private scroller: Scroller = new Scroller();

  build() {
    Stack() {
      Image($r('app.media.header_bg'))
        .width('100%')
        .height(280)
        .objectFit(ImageFit.Cover)
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

      HdsNavigation() {
        Scroll(this.scroller) {
          Column() {
            Blank().height(TITLE_PLACEHOLDER)
            // 这里放页面内容
          }
          .width('100%')
        }
        .scrollBar(BarState.Off)
      }
      .backgroundColor(Color.Transparent)
      .titleBar({
        avoidLayoutSafeArea: false,
        enableComponentSafeArea: true,
        style: {
          scrollEffectOpts: {
            enableScrollEffect: true,
            scrollEffectType: ScrollEffectType.GRADIENT_BLUR,
            blurEffectiveStartOffset: LengthMetrics.vp(0),
            blurEffectiveEndOffset: LengthMetrics.vp(56)
          },
          originalStyle: {
            backgroundStyle: { backgroundColor: Color.Transparent }
          },
          scrollEffectStyle: {
            backgroundStyle: { maskExtraHeight: 56 }
          }
        }
      })
      .bindToScrollable([this.scroller])
    }
    .width('100%')
    .height('100%')
  }
}

如果开启 avoidLayoutSafeArea: true 后顶部变白，通常是标题栏整体避开了状态栏，但状态栏下方没有同一张背景或透明模糊层承接；这时应优先补背景层，而不是继续加大 Blank。若你的顶部背景需要跟随 Scroll 一起滚动，再按安全区文档检查滚动容器链路上的 expandSafeArea 生效条件。

参考： https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdsnavigation https://developer.huawei.com/consumer/cn/doc/HarmonyOS-Guides/ui-design-navigation-dynamic-blur

参考《设置动态模糊样式》