HarmonyOS 鸿蒙Next如何设置沉浸式窗口

问题现象

如何设置沉浸式窗口。

解决措施

在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));
  <span class="hljs-comment"><span class="hljs-comment">// 2.实现沉浸式效果。方式一：设置导航栏、状态栏不显示。 </span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> names: <span class="hljs-built_in"><span class="hljs-built_in">Array</span></span>&lt;<span class="hljs-string"><span class="hljs-string">'status'</span></span> | <span class="hljs-string"><span class="hljs-string">'navigation'</span></span>&gt; = []; 
  windowClass.setWindowSystemBarEnable(names, (err: BusinessError) =&gt; { 
    <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> errCode: number = err.code; 
    <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (errCode) { 
      console.error(<span class="hljs-string"><span class="hljs-string">'Failed to set the system bar to be visible. Cause:'</span></span> + <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(err)); 
      <span class="hljs-keyword"><span class="hljs-keyword">return</span></span>; 
    } 
    console.info(<span class="hljs-string"><span class="hljs-string">'Succeeded in setting the system bar to be visible.'</span></span>); 
  }); 
  <span class="hljs-comment"><span class="hljs-comment">// 2.实现沉浸式效果。方式二：设置窗口为全屏布局，配合设置导航栏、状态栏的透明度、背景/文字颜色及高亮图标等属性，与主窗口显示保持协调一致。 </span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> isLayoutFullScreen = <span class="hljs-literal"><span class="hljs-literal">true</span></span>; 
  windowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err: BusinessError) =&gt; { 
    <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> errCode: number = err.code; 
    <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (errCode) { 
      console.error(<span class="hljs-string"><span class="hljs-string">'Failed to set the window layout to full-screen mode. Cause:'</span></span> + <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(err)); 
      <span class="hljs-keyword"><span class="hljs-keyword">return</span></span>; 
    } 
    console.info(<span class="hljs-string"><span class="hljs-string">'Succeeded in setting the window layout to full-screen mode.'</span></span>); 
  }); 
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> sysBarProps: window.SystemBarProperties = { 
    statusBarColor: <span class="hljs-string"><span class="hljs-string">'#ff00ff'</span></span>, 
    navigationBarColor: <span class="hljs-string"><span class="hljs-string">'#00ff00'</span></span>, 
    statusBarContentColor: <span class="hljs-string"><span class="hljs-string">'#ffffff'</span></span>, 
    navigationBarContentColor: <span class="hljs-string"><span class="hljs-string">'#ffffff'</span></span> 
  }; 
  windowClass.setWindowSystemBarProperties(sysBarProps, (err: BusinessError) =&gt; { 
    <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> errCode: number = err.code; 
    <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (errCode) { 
      console.error(<span class="hljs-string"><span class="hljs-string">'Failed to set the system bar properties. Cause: '</span></span> + <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(err)); 
      <span class="hljs-keyword"><span class="hljs-keyword">return</span></span>; 
    } 
    console.info(<span class="hljs-string"><span class="hljs-string">'Succeeded in setting the system bar properties.'</span></span>); 
  }); 
}) 
<span class="hljs-comment"><span class="hljs-comment">// 3.为沉浸式窗口加载对应的目标页面。 </span></span>
windowStage.loadContent(<span class="hljs-string"><span class="hljs-string">"pages/page2"</span></span>, (err: BusinessError) =&gt; { 
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> errCode: number = err.code; 
  <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (errCode) { 
    console.error(<span class="hljs-string"><span class="hljs-string">'Failed to load the content. Cause:'</span></span> + <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(err)); 
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span>; 
  } 
  console.info(<span class="hljs-string"><span class="hljs-string">'Succeeded in loading the content.'</span></span>); 
}); 
}
};
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

参考链接

体验窗口沉浸式能力