6

【FFH】OpenHarmony北向-无上下状态栏的全屏沉浸式设置

 1 year ago
source link: https://ost.51cto.com/posts/19491
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

【FFH】OpenHarmony北向-无上下状态栏的全屏沉浸式设置

最近在尝试学习OpenHarmony北向开发时碰到了一个问题，发现将应用运行在开发板上时，在看视频、玩游戏等场景下，用户往往希望隐藏状态栏、导航栏等不必要的系统窗口，从而获得更佳的沉浸式体验。在这里提供一种的解决方法

demo效果

【FFH】OpenHarmony北向-无上下状态栏的全屏沉浸式设置-开源基础软件社区
【FFH】OpenHarmony北向-无上下状态栏的全屏沉浸式设置-开源基础软件社区

（前者为设置后，可见上下位置都填充了，达到了沉浸式全屏的效果）

在这里我们主要用到的是’@ohos.window’提供的管理窗口的一些基础能力，包括对当前窗口的创建、销毁、各属性设置，以及对各窗口间的管理调度。以下是OpenHarmony官方文档对应的链接OpenAtom OpenHarmony

窗口沉浸式效果

要达到沉浸式效果，一般有三种方法

  1. 设置为全屏显示
  2. 设置隐藏状态栏、导航栏
  3. 设置全屏布局，并使导航栏、状态栏等系统窗口和应用主窗口保持主题协调一致

我们在这里使用的是第一种方法

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: ')
            })
    }
}

学习道路上的一点点小记录


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK