页面要突破手机安全区域来全屏显示(沉浸式模式显示),其他页面不需要,如何设置安全区域文字颜色

#效果图

##思路+遇到的问题

在aboutToAppear中使用window模块的 getLastWindowsetWindowLayoutFullScreen两个方法来处理全屏显示

设置沉浸式模式的特点:

在任何一个页面中设置过一次之后,其他页面也会跟着全屏显示
 

这么处理会出现问题:从其他tab标签进入我的tab标签时,会出现底部tab栏闪动

解决:在进入应用时就开启所有页面的全屏模式
带来新的问题:不需要全屏显示的页面内容会突破安全区域显示,导致内容显示不正常
解决:需要通过获取手机的安全高度来结合 padding来适配顶部内容的正常显示

window.AvoidAreaType.TYPE_SYSTEM 获取导航栏安全高度,但是获取不到底部指示器的高度

window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR -> 获取底部指示器的高度
#设置安全区域文字颜色

window模块的getLastWindowsetWindowSystemBarProperties({statusBarContentColor:颜色}) 来设置安全区域文字颜色  

  • #FFFFFF -> 设置白色     #000000 -> 设置黑色

一旦执行了颜色设置代码,所有页面都会是同一个颜色,如果需要改颜色,需要在指定页面重新设置一次新颜色

#沉浸式模式类封装

封装安全区域工具类windowManager.ets,用来设置沉浸式模式以及设置安全区域的字体颜色

  1. enableFullScreen - 开启全屏
  2. disableFullScreen - 关闭全屏
  3. getAvoidAreaTop获取顶部安全区域高度,并返回该值
  4. getAvoidAreaBottom获取底部导航条安全区域高度,并返回该值
  5. settingStatusBarContentColor -设置安全区域文字为白色或者黑色

安全高度获取到的是px单位,需要使用px2vp函数转换成vp单位

##完整版代码如下

import { window } from '@kit.ArkUI'export class windowManager {// 1.开启全屏static async enableFullScreen() {const win = await window.getLastWindow(getContext())win.setWindowLayoutFullScreen(true)}// 关闭全屏static async disableFullScreen() {const win = await window.getLastWindow(getContext())win.setWindowLayoutFullScreen(false)}// 3.获取顶部安全区域高度static async getAvoidAreeTop() {const win = await window.getLastWindow(getContext())const area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)const topHeight = px2vp(area.topRect.height)AppStorage.setOrCreate('topHeight', topHeight)return topHeight}//  4.获取底部导航高度static async getAvoidAreeBottom() {const win = await window.getLastWindow(getContext())const area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)const bottomHeight = px2vp(area.bottomRect.height)AppStorage.setOrCreate('bottomHeight', bottomHeight)return bottomHeight}// 5.设置安全区域文字的颜色static async settingStatusBarContentColor(color: '#FFFFFF' | '#000000') {const win = await window.getLastWindow(getContext())win.setWindowSystemBarProperties({ statusBarContentColor: color })}
}
##封装好直接在其他页面调用即可:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/53447.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用Spoon连接data-integration-server并在服务器上执行转换

1.建立连接 2.新建转换或任务 3.右键[子服务器],新建一个服务器连接(data-integration-server服务器的连接信息) 4.右键[Run configurations],新建一个执行连接,勾选相应的选项即可: 5.选择服务器运行即可! 6.最后,你可以通过服务器端的WEB查看执行日志…

猫眼电影字体破解(图片转码方法)

问题 随便拿一篇电影做样例。我们发现猫眼的页面数据在预览窗口中全是小方框。在当我们拿到源码以后,数据全是加密后的。所以我们需要想办法破解加密,拿到数据。 破解过程 1.源码获取问题与破解 分析 在我们刚刚请求url的时候是可以得到数据的&#xff…

【MySQL】MySQL操作介绍

MySQL操作 认识 MySQL什么是 MySQL关系型数据库的组成结构"客户端-服务器"结构 数据库的基本操作创建数据库查看数据库删除数据库使用数据库 数据类型整型浮点类型字符串类型日期类型总结 表的操作创建表查看表查看表的信息删除表 数据的基础操作插入数据指定列插入全…

Java过滤器和监听器

1. 过滤器 1.1. 过滤器 使用baseServlet的优点:方便进行乱码的统一处理,但是如果不使用servlet,在进行中文乱码处理时就需要在每个servlet中书写,比较麻烦 问题:重复的代码在项目中多次使用书写 解决:过滤…

2024 第七届“巅峰极客”网络安全技能挑战赛初赛 Web方向 题解WirteUp

EncirclingGame 题目描述:A simple game, enjoy it and get the flag when you complete it. 开题,前端小游戏,红点出不去就行 直接玩通关了 看看如何不玩也能拿到flag,flag存储在后端php文件内,前端找不到。 看一下…

【原创】java+springboot+mysql校园二手商品交易网设计与实现

个人主页:程序猿小小杨 个人简介:从事开发多年,Java、Php、Python、前端开发均有涉猎 博客内容:Java项目实战、项目演示、技术分享 文末有作者名片,希望和大家一起共同进步,你只管努力,剩下的交…

【MySQL】MySQL基础

目录 什么是数据库主流数据库基本使用MySQL的安装连接服务器服务器、数据库、表关系使用案例数据逻辑存储 MySQL的架构SQL分类什么是存储引擎 什么是数据库 mysql它是数据库服务的客户端mysqld它是数据库服务的服务器端mysql本质:基于C(mysql&#xff09…

QT 编译报错:C3861: ‘tr‘ identifier not found

问题: QT 编译报错:C3861: ‘tr’ identifier not found 原因 使用tr的地方所在的类没有继承自 QObject 类 或者在不在某一类中, 解决方案 就直接用类名引用 :QObject::tr( )

【舍入,取整,取小数,取余数丨Excel 函数】

数学函数 1、Round函数 Roundup函数 Rounddown函数 取整:(Int /Trunc)其他舍入函数: 2、Mod函数用Mod函数提取小数用Mod函数 分奇偶通过身份证号码判断性别 1、Round函数 Roundup函数 Rounddown函数 Round(数字,保留几位小数)(四…

SOEX从去中心化的链上社交关系到创收策略

是时候摆脱传统的在线社区,真正进入 Web3 了,利用区块链的力量,并理解社交互动的意义远不止分享内容或复制交易。代币化将赋能参与提升到一个全新的水平,并带来一系列新的机会。 社交网络可以发挥强大的作用,尤其是从…

Android的logcat日志详解

Android log系统 logcat介绍 logcat是android中的一个命令行工具,可以用于得到程序的log信息。下面介绍 adb logcat中的详细参数命令以及如何才能高效的打印日志,或把日志保存到我们指定的位置。 可以输入 adb logcat --help,查看一下一些简…

VMware vSphere5.0关闭虚拟机电源时,报错从ESXI主机接收到错误

ESXI和VCENTER都是5.0版本的,有台虚拟机关机报错提示从ESXI主机接受到意外错误 具体报错信息如下: 从VCENTER平台对该虚拟机做任何操作都无法生效,后来查看了虚拟机的网络和端口,发现SSH能正常联通,进入虚拟机后使用命…

【云原生】docker 部署 Doris 数据库使用详解

目录 一、前言 二、数据分析概述 2.1 什么是数据分析 2.2 数据分析目的和意义 2.3 数据分析常用的技术和工具 2.3.1 编程语言 2.3.2 数据处理和分析库 2.3.3 数据可视化工具 2.3.4 数据库系统 2.3.5大数据处理框架 2.3.6 云服务和平台 2.3.7 其他工具 三、Doris介绍…

gdb中使用python脚本

1、入门案例 首先有1个a.cpp&#xff0c;代码如下&#xff1a; #include <map> #include <set> #include <iostream> #include <string>using namespace std;struct MyStruct {std::string mName;std::map<int, std::string> mField1;std::set…

51单片机的无线病床呼叫系统【proteus仿真+程序+报告+原理图+演示视频】

1、主要功能 该系统由AT89C51/STC89C52单片机LCD1602显示模块温湿度传感器模块矩阵按键时钟模块等模块构成。适用于病床呼叫系统、16床位呼叫等相似项目。 可实现基本功能: 1、LCD1602实时显示北京时间、温湿度信息、呼叫床位等信息&#xff1b; 2、DHT11采集病房温湿度信息&…

深度学习的发展历程

深度学习的起源 在机器学习中&#xff0c;我们经常使用两种方式来表示特征&#xff1a;局部表示&#xff08;Local Representation&#xff09;和分布式表示&#xff08;Distributed Representation&#xff09;。以颜色表示为例&#xff0c;见下图&#xff1a; 要学习到一种好…

iPhone手机清理软件:照片清理功能全解析

在数字化生活中&#xff0c;智能手机成为我们记录生活点滴的主要工具&#xff0c;尤其是iPhone&#xff0c;以其卓越的相机功能备受用户青睐。然而&#xff0c;成千上万的照片迅速堆积&#xff0c;不仅占用了大量存储空间&#xff0c;还使得设备运行缓慢。在众多解决方案中&…

【数据分享】《中国城市统计年鉴》(1985-2023)全PDF版本 第一次补档

数据介绍 中国城市&#xff0c;如同一本生动的历史书&#xff0c;承载着经济、社会的快速变迁。《中国城市统计年鉴》记录了城市的发展轨迹&#xff0c;是我们理解城市化进程、洞察城市挑战的重要指南。 这份年鉴的数据庞大而详实&#xff0c;囊括了中国城市发展的多个方面。…

船舶机械设备5G智能工厂物联数字孪生平台,推进制造业数字化转型

船舶机械设备5G智能工厂物联数字孪生平台&#xff0c;推进制造业数字化转型。在当今数字化浪潮推动下&#xff0c;船舶制造业正经历着前所未有的变革。为了应对市场的快速变化&#xff0c;提升生产效率&#xff0c;降低成本&#xff0c;并增强国际竞争力&#xff0c;船舶机械设…

海底生物检测-目标检测数据集(包括VOC格式、YOLO格式)

海底生物检测-目标检测数据集&#xff08;包括VOC格式、YOLO格式&#xff09; 数据集&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1Kp4Reqt4tq1IafVF33IrnA?pwddxbv 提取码&#xff1a;dxbv 数据集信息介绍&#xff1a; 共有 7383 张图像和一一对应的标注文件 标…