OpenHarmony北向-無上下狀態欄的全屏沉浸式設置

作者：yoshioimai 2022-11-23 14:47:29

系統 OpenHarmony

在這里我們主要用到的是’@ohos.window’提供的管理窗口的一些基礎能力，包括對當前窗口的創建、銷毀、各屬性設置，以及對各窗口間的管理調度。

??想了解更多關于開源的內容，請訪問：???

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??

前言

最近在嘗試學習OpenHarmony北向開發時碰到了一個問題，發現將應用運行在開發板上時，在看視頻、玩游戲等場景下，用戶往往希望隱藏狀態欄、導航欄等不必要的系統窗口，從而獲得更佳的沉浸式體驗。在這里提供一種的解決方法。

demo效果

#盲盒+碼#【FFH】OpenHarmony北向-無上下狀態欄的全屏沉浸式設置-開源基礎軟件社區

（前者為設置后，可見上下位置都填充了，達到了沉浸式全屏的效果）

具體步驟

在這里我們主要用到的是’@ohos.window’提供的管理窗口的一些基礎能力，包括對當前窗口的創建、銷毀、各屬性設置，以及對各窗口間的管理調度。以下是OpenHarmony官方文檔對應的鏈接??OpenAtom OpenHarmony??。

窗口沉浸式效果

要達到沉浸式效果，一般有三種方法

設置為全屏顯示。
設置隱藏狀態欄、導航欄。
設置全屏布局，并使導航欄、狀態欄等系統窗口和應用主窗口保持主題協調一致。

我們在這里使用的是第一種方法。

window模塊

在OpenHarmony中，窗口模塊主要負責以下職責：

提供應用和系統界面的窗口對象。應用開發者通過窗口加載UI界面，實現界面顯示功能。
組織不同窗口的顯示關系，即維護不同窗口間的疊加層次和位置屬性。應用和系統的窗口具有多種類型，不同類型的窗口具有不同的默認位置和疊加層次（Z軸高度）。同時，用戶操作也可以在一定范圍內對窗口的位置和疊加層次進行調整。
提供窗口裝飾。窗口裝飾指窗口標題欄和窗口邊框。窗口標題欄通常包括窗口最大化、最小化及關閉按鈕等界面元素，具有默認的點擊行為，方便用戶進行操作；窗口邊框則方便用戶對窗口進行拖拽縮放等行為。窗口裝飾是系統的默認行為，開發者可選擇啟用/禁用，無需關注UI代碼層面的實現。
提供窗口動效。在窗口顯示、隱藏及窗口間切換時，窗口模塊通常會添加動畫效果，以使各個交互過程更加連貫流暢。在OpenHarmony中，應用窗口的動效為默認行為，不需要開發者進行設置或者修改。
指導輸入事件分發。即根據當前窗口的狀態或焦點，進行事件的分發。觸摸和鼠標事件根據窗口的位置和尺寸進行分發，而鍵盤事件會被分發至焦點窗口。應用開發者可以通過窗口模塊提供的接口設置窗口是否可以觸摸和是否可以獲焦。

導入模塊

首先我們導入能力模塊。

import window from '@ohos.window';

獲取窗口對象

然后獲取當前應用內最后顯示的窗口的promise對象。

var windowClass = null;
            let promise = window.getTopWindow();

具體實現

我們在這個Promise異步回調中我們利用’windowClass.setFullScreen()'進行沉浸式全屏設置。

promise.then((data)=> {
            windowClass = data;
            console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data))
        }).then(()=>{
            windowClass.setFullScreen(true)
            this.windowFull=true
            console.info('Succeeded in obtaining the top window. Data: ')
        })

全部代碼

<!--index.html-->
<div class="container" onclick="windowClick">
    <text class="title">
        {{ $t('strings.hello') }} ` title `
    </text>
</div>

//index.js
import window from '@ohos.window';

export default {
    data: {
        title: "",
        windowFull:false//flag
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    windowClick(){
        //點擊觸發全屏
            var windowClass = null;
            let promise = window.getTopWindow();
            promise.then((data)=> {
                windowClass = data;
                console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data))
            }).then(()=>{
                if(this.windowFull===true){
                    windowClass.setFullScreen(false)//取消全屏
                    this.windowFull=false
                }else{
                    windowClass.setFullScreen(true)//全屏
                    this.windowFull=true
                }
                console.info('Succeeded in obtaining the top window. Data: ')
            })
    }
}