鸿蒙状态栏设置

基于鸿蒙 ArkTS API9,设置状态栏颜色,隐藏显示状态栏。

API参考文档

参考文档

新建项目打开之后发现状态栏是黑色的,页面颜色设置完了也不能影响状态栏颜色,如果是浅色背景,上边有个黑色的头,感觉还是不太好看。显示效果如下:

请添加图片描述

下边说一下当前修改背景色。

文档里边目前说明是不支持修改状态栏背景色的。

那么能不能把界面的范围推到最顶层呢,这个研究了一下还是可以的。
因为默认是非全屏状态,可以把这个给设置成全屏状态,然后自行在页面中设置一个背景色即可。

效果如下:

请添加图片描述

全局设置

在 EntryAbility.ts 里边找到 onWindowStageCreate,通过 windowStage 获取主窗口并调用 setWindowLayoutFullScreen 修改全屏状态。
还能通过调用 setWindowSystemBarEnable 隐藏状态栏。

onWindowStageCreate(windowStage: window.WindowStage) {
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

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

    // 设置成全屏
    windowStage.getMainWindow((err, windowClass) => {
      windowClass.setWindowLayoutFullScreen(true)
      // 隐藏状态栏显示
      windowClass.setWindowSystemBarEnable(['navigation'])
    })

    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
  });
}

局部方式

再单独某一个页面中调用隐藏,或者说再加载的首页隐藏,之后再也不设置显示,也是能达到跟全局一样的效果,或者在 onPageShow 的时候隐藏, onPageHide 的时候显示。

import window from '@ohos.window';

onPageShow() {
  window.getLastWindow(getContext(this), (err, w) => {
    w.setWindowLayoutFullScreen(false)
  })
}

onPageHide() {
  window.getLastWindow(getContext(this), (err, w) => {
    w.setWindowLayoutFullScreen(true)
  })
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐