如何设置沉浸式状态栏？

Question

如何设置沉浸式状态栏

Answer 1

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.'); 
    }); 
  } 
};