??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：???

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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

前言

最近在嘗試學(xué)習(xí)OpenHarmony北向開發(fā)時(shí)碰到了一個(gè)問題，發(fā)現(xiàn)將應(yīng)用運(yùn)行在開發(fā)板上時(shí)，在看視頻、玩游戲等場景下，用戶往往希望隱藏狀態(tài)欄、導(dǎo)航欄等不必要的系統(tǒng)窗口，從而獲得更佳的沉浸式體驗(yàn)。在這里提供一種的解決方法。

demo效果

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

具體步驟

在這里我們主要用到的是’@ohos.window’提供的管理窗口的一些基礎(chǔ)能力，包括對(duì)當(dāng)前窗口的創(chuàng)建、銷毀、各屬性設(shè)置，以及對(duì)各窗口間的管理調(diào)度。以下是OpenHarmony官方文檔對(duì)應(yīng)的鏈接??OpenAtom OpenHarmony??。

窗口沉浸式效果

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

1. 設(shè)置為全屏顯示。
2. 設(shè)置隱藏狀態(tài)欄、導(dǎo)航欄。
3. 設(shè)置全屏布局，并使導(dǎo)航欄、狀態(tài)欄等系統(tǒng)窗口和應(yīng)用主窗口保持主題協(xié)調(diào)一致。

我們?cè)谶@里使用的是第一種方法。

window模塊

在OpenHarmony中，窗口模塊主要負(fù)責(zé)以下職責(zé)：

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

導(dǎo)入模塊

首先我們導(dǎo)入能力模塊。

import window from '@ohos.window';

獲取窗口對(duì)象

然后獲取當(dāng)前應(yīng)用內(nèi)最后顯示的窗口的promise對(duì)象。

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

具體實(shí)現(xiàn)

我們?cè)谶@個(gè)Promise異步回調(diào)中我們利用’windowClass.setFullScreen()'進(jìn)行沉浸式全屏設(shè)置。

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(){
        //點(diǎn)擊觸發(fā)全屏
            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: ')
            })
    }
}

總結(jié)

學(xué)習(xí)道路上的一點(diǎn)點(diǎn)小記錄。

??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：???

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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