当前位置:   article > 正文

【HarmonyOS】API9沉浸式状态栏

【HarmonyOS】API9沉浸式状态栏

  对于沉浸式状态栏,在之前API8 FA模型开发中可以通过在config.json配置主题的方式实现应用的沉浸式体验,在最新的API9 Stage模型中系统提供了沉浸式窗口的示例(管理应用窗口(Stage模型)-窗口管理-开发-HarmonyOS应用开发)。通过调用setWindowSystemBarEnable接口,设置导航栏、状态栏不显示,从而达到沉浸式效果。

但是这种方式仅仅式隐藏了状态栏和导航栏,程序运行后状态栏和导航栏会显示为黑色,无法实现状态栏与App颜色一致,如下图:

cke_3478.png

 如果要显示完全的沉浸式效果,可以将当前应用窗口设置为全屏样式实现。关键代码是:

windowClass.setWindowLayoutFullScreen(true)

通过设置为全屏就可以实现状态栏和导航栏全覆盖的效果:cke_30737.png

最后onWindowStageCreate关键代码如下,以供大家参考:

  1. onWindowStageCreate(windowStage) {
  2. // 1.获取应用主窗口。
  3. let windowClass = null;
  4. windowStage.getMainWindow((err, data) => {
  5. if (err.code) {
  6. console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
  7. return;
  8. }
  9. windowClass = data;
  10. console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));
  11. // 2.实现沉浸式效果:设置导航栏、状态栏不显示。
  12. let names = [];
  13. windowClass.setWindowSystemBarEnable(names, (err) => {
  14. if (err.code) {
  15. console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err));
  16. return;
  17. }
  18. console.info('Succeeded in setting the system bar to be visible.');
  19. });
  20. windowClass.setWindowLayoutFullScreen(true)
  21. })
  22. // 3.为沉浸式窗口加载对应的目标页面。
  23. windowStage.loadContent("pages/Index", (err) => {
  24. if (err.code) {
  25. console.error('Failed to load the content. Cause:' + JSON.stringify(err));
  26. return;
  27. }
  28. console.info('Succeeded in loading the content.');
  29. });
  30. }
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/297743
推荐阅读
相关标签
  

闽ICP备14008679号