如何设置沉浸式窗口?

Question

问题现象

如何设置沉浸式窗口。

Answer 1

解决措施

在EntryAbility的onWindowStageCreate方法中通过windowStage获取window，然后分别调用setWindowLayoutFullScreen和setWindowSystemBarEnable方法。

参考代码

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 | null = null; 
    windowStage.getMainWindow((err: BusinessError, data) => { 
      let errCode: number = err.code; 
      if (errCode) { 
        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: Array<'status' | 'navigation'> = []; 
      windowClass.setWindowSystemBarEnable(names, (err: BusinessError) => { 
        let errCode: number = err.code; 
        if (errCode) { 
          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: BusinessError) => { 
        let errCode: number = err.code; 
        if (errCode) { 
          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', 
        statusBarContentColor: '#ffffff', 
        navigationBarContentColor: '#ffffff' 
      }; 
      windowClass.setWindowSystemBarProperties(sysBarProps, (err: BusinessError) => { 
        let errCode: number = err.code; 
        if (errCode) { 
          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: BusinessError) => { 
      let errCode: number = err.code; 
      if (errCode) { 
        console.error('Failed to load the content. Cause:' + JSON.stringify(err)); 
        return; 
      } 
      console.info('Succeeded in loading the content.'); 
    }); 
  } 
};

参考链接

体验窗口沉浸式能力