OpenHarmony北向-無上下狀態(tài)欄的全屏沉浸式設(shè)置

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

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

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

前言

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

demo效果

#盲盒+碼#【FFH】OpenHarmony北向-無上下狀態(tài)欄的全屏沉浸式設(shè)置-開源基礎(chǔ)軟件社區(qū)

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

具體步驟

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

窗口沉浸式效果

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

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

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

window模塊

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

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

導(dǎo)入模塊

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

import window from '@ohos.window';

獲取窗口對象

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

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

具體實現(xiàn)

我們在這個Promise異步回調(diào)中我們利用’windowClass.setFullScreen()'進行沉浸式全屏設(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(){
        //點擊觸發(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í)道路上的一點點小記錄。

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

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

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

責(zé)任編輯：jianghua 來源： 51CTO開源基礎(chǔ)軟件社區(qū)

北向開發(fā)鴻蒙