HarmonyOS 鸿蒙Next中HdsNavigation/HdsNavDestination如何设置状态栏部分也模糊？

HarmonyOS 鸿蒙Next中HdsNavigation/HdsNavDestination如何设置状态栏部分也模糊？ cke_476.png

现在状态栏是透明的，比较割裂。


更多关于HarmonyOS 鸿蒙Next中HdsNavigation/HdsNavDestination如何设置状态栏部分也模糊？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

有设置沉浸式吗，沉浸式之后用 padding: { top: xx }, 导航栏的模糊颜色应该也会覆盖到状态栏那里

更多关于HarmonyOS 鸿蒙Next中HdsNavigation/HdsNavDestination如何设置状态栏部分也模糊？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Navigation设置padding不会延申标题栏高度。

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
  let windowClass: window.Window | undefined = undefined;
  windowStage.getMainWindow((err: BusinessError, data) => {
    data.setWindowLayoutFullScreen(true)
    if (err.code) {
      console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
      return;
    }
    windowClass = data;
    console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));

    let sysBarProps: window.SystemBarProperties = {
      statusBarColor: 'rgba(0, 0, 0, 0)', // 设置状态栏颜色为透明
    };
    windowClass.setWindowSystemBarProperties(sysBarProps, (err) => {
      if (err.code) {
        console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in setting the system bar properties.');
    });

  });
  windowStage.loadContent('pages/Index', (err) => {
    if (err.code) {
      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
      return;
    }
    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
  });
}

这个可以设置状态栏的颜色呢，尝试一下呢

在HarmonyOS Next中，HdsNavigation/HdsNavDestination组件可通过设置blurStyle属性实现状态栏模糊效果。具体使用WindowManager.setWindowBlur方法，传入模糊半径参数调整模糊程度。示例代码：windowManager.setWindowBlur(blurRadius)，其中blurRadius数值控制模糊强度。需在页面初始化时调用，确保状态栏与导航栏视觉统一。

在HarmonyOS Next中，可以通过在HdsNavigation或HdsNavDestination组件中设置blurEffect属性来实现状态栏区域的模糊效果。具体步骤如下：

  1. 在hds_navigation或hds_nav_destination节点中添加以下属性：
blurEffect="BACKGROUND_BLUR"
blurRegion="STATUS_BAR"
  1. 如需调整模糊程度，可配合使用blurRadius属性：
blurRadius="20"

完整示例：

<hds_navigation
    blurEffect="BACKGROUND_BLUR"
    blurRegion="STATUS_BAR"
    blurRadius="20">
    <!-- 其他内容 -->
</hds_navigation>

这样设置后，状态栏区域将呈现毛玻璃模糊效果，与页面内容形成更好的视觉融合，解决当前透明状态栏带来的割裂感问题。模糊效果会自动适配系统状态栏的高度和位置。

回到顶部