基于鸿蒙API10的RTSP播放器(四:沉浸式播放窗口)

news/2024/12/23 1:22:50/

在这里插入图片描述

前言:
典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条,其中状态栏和导航条,通常在沉浸式布局下称为避让区;避让区之外的区域称为安全区。

开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感,从而使用户获得最佳的UI体验。

我们在前面三节中的播放器,都有顶部状态栏何底部导航栏,为此我们可以通过把应用设置为全屏来实现沉浸式播放的效果。

方法:

  • 窗口全屏布局方案:调整布局系统为全屏布局,界面元素延伸到状态栏和导航条区域实现沉浸式效果。当不隐藏避让区时,可通过接口查询状态栏和导航条区域进行可交互元素避让处理,并设置状态栏或导航条的颜色等属性与界面元素匹配。当隐藏避让区时,通过对应接口设置全屏布局即可。
  • 组件安全区方案:布局系统保持安全区内布局,然后通过接口延伸绘制内容(如背景色,背景图)到状态栏和导航条区域实现沉浸式效果。该方案下,界面元素仅做绘制延伸,无法单独布局到状态栏和导航条区域,针对需要单独布局UI元素到状态栏和导航条区域的场景建议使用窗口全屏布局方案处理。

代码:


// 这里是ArkTS代码,写TS是为了代码有颜色效果import AbilityConstant from '@ohos.app.ability.AbilityConstant';  
import hilog from '@ohos.hilog';  
import UIAbility from '@ohos.app.ability.UIAbility';  
import Want from '@ohos.app.ability.Want';  
import window from '@ohos.window';  
import { BusinessError } from '@kit.BasicServicesKit';  export default class EntryAbility extends UIAbility {  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');  }  onDestroy(): void {  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');  }  onWindowStageCreate(windowStage: window.WindowStage): void {  // Main window is created, set main page for this ability  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');  windowStage.loadContent('pages/Index', (err) => {  // 设置全屏  let windowClass:window.Window = windowStage.getMainWindowSync();  windowClass.setWindowLayoutFullScreen(true)  .then(()=>{  console.info("plumcarefree Successfully set Full Window")  })  .catch((err:BusinessError)=>{  console.error("plumcarefree Nosuccessfully set Full Window")  })  if (err.code) {  hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');  return;  }  hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');  });  }  onWindowStageDestroy(): void {  // Main window is destroyed, release UI related resources  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');  }  onForeground(): void {  // Ability has brought to foreground  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');  }  onBackground(): void {  // Ability has back to background  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');  }  
}

http://www.ppmy.cn/news/1527192.html

相关文章

Maven入门学习

maven是一款管理和构建java项目的工具。 1.概述 1.1安装 安装步骤: 1.1.1官网下载apache-maven-3.6.1-bin.zip&#xff0c;解压 apache-maven-3.6.1-bin.zip 。 1.1.2配置本地仓库:修改conf/settings.xml中的<localRepository>为一个指定目录。 <localRepository&g…

华雁智科前端面试题

1. var 变量的提升 题目&#xff1a; var a 1 function fun() {console.log(b)var b 2 } fun() console.log(a) 正确输出结果&#xff1a;undefined、1答错了&#xff0c;给一个大嘴巴子&#xff0c;错误答案输出结果为&#xff1a;2,1 此题主要考察 var 定义的变量&…

基于 PyQt5 和 OpenCV 进行图像处理操作的GUI工具初版

为了实现一个基于 PyQt5 和 OpenCV 的图形用户界面&#xff08;GUI&#xff09;&#xff0c;要求如下&#xff1a; 左边显示加载的图片。 中间提供各种对图片进行处理的操作方法&#xff08;如灰度化、模糊处理等&#xff09;。 右边显示处理后的效果图。 接下来我将详细讲解如…

Ajax 揭秘:异步 Web 交互的艺术

Ajax 揭秘&#xff1a;异步 Web 交互的艺术 一 . Ajax 的概述1.1 什么是 Ajax ?1.2 同步和异步的区别1.3 Ajax 的应用场景1.3.1 注册表单的用户名异步校验1.3.2 内容自动补全 二 . Ajax 的交互模型和传统交互模型的区别三 . Ajax 异步请求 axios3.1 axios 介绍3.1.1 使用步骤3…

三相可控整流电路 (三相半波,三相桥式)

目录 1. 三相半波整流电路 2. 三相桥式全控整流电路 三相可控整流电路利用三相交流电源&#xff0c;通过可控硅&#xff08;晶闸管&#xff09;将交流电整流为直流电。主要有两种常见类型&#xff1a;三相半波整流电路和三相桥式全控整流电路。 1. 三相半波整流电路 三相半波…

vue2-ssr从vue-cli搭建项目改造服务端渲染+打包上线部署

1.通过 vue-cli 创建 vue 项目 vue create 项目名称 2.进入项目安装vue服务端渲染插件vue-server-renderer npm install vue-server-renderer -S vue-server-renderer和vue必须匹配版本 vue-server-renderer依赖一些Node.js原生提供的api&#xff0c;因此需要配合Node.js使…

乔拓云模板助力,微信小程序快速上线无需愁备案

想要快速打造并上线自己的微信小程序吗&#xff1f;乔拓云平台是您的不二之选&#xff01;无需担心复杂的备案流程&#xff0c;乔拓云提供免费服务&#xff0c;远程协助您轻松完成微信小程序的备案工作。 只需简单几步&#xff0c;您的小程序就能闪亮登场&#xff1a;首先&…

Apache-wed服务器环境的安装

一。安装httpd并且开启httpd yum install httpd systemctl start httpd 二。关闭防火墙 systemctl stop firewall 三。常规配置wed服务 mkdir /www vim index.html&#xff08;里面写入自己的内容&#xff09; chmod 755 index.htm chmod 755 /www vim /etc/httpd/co…