如何设置沉浸式状态栏

​如何设置沉浸式状态栏

HarmonyOS
2024-03-17 17:24:38
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
LenZhong

1. 获取应用主窗口。通过getMainWindow接口获取应用主窗口。

2. 实现沉浸式效果。有以下两种方式:

  • 方式一:调用setWindowSystemBarEnable接口,设置导航栏、状态栏不显示,从而达到沉浸式效果。
  • 方式二:调用setWindowLayoutFullScreen接口,设置应用主窗口为全屏布局;然后调用setWindowSystemBarProperties接口,设置导航栏、状态栏的透明度、背景/文字颜色以及高亮图标等属性,使之保持与主窗口显示协调一致,从而达到沉浸式效果。

3. 加载显示沉浸式窗口的具体内容。通过loadContent接口加载沉浸式窗口的具体内容。

import { UIAbility } from '@kit.AbilityKit'; 
import { window } from '@kit.ArkUI'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
 
export default class EntryAbility extends UIAbility { 
  onWindowStageCreate(windowStage: window.WindowStage) { 
    // 1.获取应用主窗口。 
    let windowClass: window.Window | undefined = undefined; 
    windowStage.getMainWindow((err: BusinessError, data) => { 
      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)); 
 
      // 2.实现沉浸式效果。方式一:设置导航栏、状态栏不显示。 
      let names = []; 
      windowClass.setWindowSystemBarEnable(names, (err) => { 
        if (err.code) { 
          console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err)); 
          return; 
        } 
        console.info('Succeeded in setting the system bar to be visible.'); 
      }); 
      // 2.实现沉浸式效果。方式二:设置窗口为全屏布局,配合设置导航栏、状态栏的透明度、背景/文字颜色及高亮图标等属性,与主窗口显示保持协调一致。 
      let isLayoutFullScreen = true; 
      windowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err) => { 
        if (err.code) { 
          console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); 
          return; 
        } 
        console.info('Succeeded in setting the window layout to full-screen mode.'); 
      }); 
      let sysBarProps: window.SystemBarProperties = { 
        statusBarColor: '#ff00ff', 
        navigationBarColor: '#00ff00', 
        // 以下两个属性从API Version 8开始支持 
        statusBarContentColor: '#ffffff', 
        navigationBarContentColor: '#ffffff' 
      }; 
      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.'); 
      }); 
    }) 
    // 3.为沉浸式窗口加载对应的目标页面。 
    windowStage.loadContent("pages/page2", (err) => { 
      if (err.code) { 
        console.error('Failed to load the content. Cause:' + JSON.stringify(err)); 
        return; 
      } 
      console.info('Succeeded in loading the content.'); 
    }); 
  } 
};
分享
微博
QQ
微信
回复
2024-03-18 21:05:04
相关问题
ets开发如何设置隐藏状态栏
1392浏览 • 1回复 待解决
如何设置状态栏和导航的颜色
458浏览 • 1回复 待解决
应用如何设置隐藏顶部的状态栏
301浏览 • 1回复 待解决
元服务顶部状态栏怎么设置标题
58浏览 • 1回复 待解决
如何设置沉浸窗口,你会吗?
263浏览 • 1回复 待解决
Js UI 如何设置状态栏背景是透明的?
1533浏览 • 1回复 待解决
鸿蒙如何获取导航状态栏高度
9326浏览 • 1回复 待解决
Dialog如何覆盖状态栏全屏显示
8211浏览 • 1回复 待解决
如何获取状态栏和导航高度
543浏览 • 1回复 待解决
求大佬告知如何获取状态栏高度?
18浏览 • 1回复 待解决
设置状态栏颜色不起作用怎么回事?
415浏览 • 1回复 待解决
状态栏设置颜色失效该怎么办啊?
45浏览 • 1回复 待解决
状态栏的高度怎么获取呢
7860浏览 • 3回复 待解决
获取状态栏高度的方法
62浏览 • 0回复 待解决