HarmonyOS Next 系列之沉浸式状态实现的多种方式(七)

系列文章目录

HarmonyOS Next 系列之省市区弹窗选择器实现(一)
HarmonyOS Next 系列之验证码输入组件实现(二)
HarmonyOS Next 系列之底部标签栏TabBar实现(三)
HarmonyOS Next 系列之HTTP请求封装和Token持久化存储(四)
HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现(五)
HarmonyOS Next 系列之可移动悬浮按钮实现(六)
HarmonyOS Next 系列之沉浸式状态实现的多种方式(七)


前言

HarmonyOS Next(基于API11)沉浸式状态实现的多种方式

在这里插入图片描述


一、方法一

1、实现讲解

(1)首先设置setWindowLayoutFullScreen(true)(设置全屏布局)。

布局将从屏幕最顶部开始到最底部结束,此时状态栏和底部规避区域还在,且与页面重叠,所以还需要设置页面根容器顶部内边距为状态栏高度,底部内边距为规避区域高度,这样页面就不会重叠。

(2)页面隐藏(或销毁)周期函数内恢复非全屏布局设置setWindowLayoutFullScreen(false)

全屏布局设置是全局生效的,一旦设置跳转到其他页面同样生效,对于其他页面不需要沉浸式状态栏需要恢复原样。

ps:全屏布局非全屏显示,区别在于状态栏、规避区域还在,页面布局从屏幕最顶端开始

2、代码实现

Index.ets(页面)

import { window } from '@kit.ArkUI'@Entry
@Component
struct Index {@State statusHeight: number = 0 //状态栏高度@State bottomAvoidAreaHeight: number = 0 //手机底部规避区域高度@State windowClass: window.Window | null = null //窗口管理器aboutToAppear() {this.init()}onPageShow(): void {//设置全屏布局this.windowClass?.setWindowLayoutFullScreen(true)}onPageHide(): void {//取消全屏布局this.windowClass?.setWindowLayoutFullScreen(false)}//初始化init() {window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {//保存窗口管理器this.windowClass = windowClass//获取状态栏高度this.statusHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)//获取手机底部规避区域高度this.bottomAvoidAreaHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height)windowClass.setWindowLayoutFullScreen(true)}})}build() {Column() {//页面区域Column() {Text('沉浸式状态栏').fontColor('#fff')}.height('100%').width('100%').border({width: 1,color: 'red'})}.height('100%').width('100%').backgroundImage(`https://img1.baidu.com/it/u=3138942692,3007703896&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500`).backgroundImageSize({ height: '100%', width: '100%' }).padding({ top: this.statusHeight, bottom: this.bottomAvoidAreaHeight })}
}

运行效果:
在这里插入图片描述

ps:为了肉眼好区分,给页面区域加了红色边框

3、全局缓存窗口管理器

当项目内多个页面需要设置全屏布局时,每个页面要重新获取窗口管理器、状态栏高度、底部规避区域高度就比较麻烦,可以在entryabili内获取到上述属性值(对象)并存储在全局对象globalThis上

EntryAbility.ets

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';export default class EntryAbility extends UIAbility {onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {}onWindowStageCreate(windowStage: window.WindowStage): void {//添加如下代码windowStage.getMainWindow((err, data) => {if (!err.code) {//全局变量添加窗口对象globalThis.windowClass = data;//全局变量添加状态栏高度单位vpglobalThis.statusHeight = px2vp(data.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)//全局添加底部规避区域高度单位vpglobalThis.bottomAvoidAreaHeight = px2vp(data.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height)}})//windowStage.loadContent('pages/Index', (err) => {if (err.code) {return;}});}}

Index.ets(页面)

import { window } from '@kit.ArkUI'@Entry
@Component
struct Index {onPageShow(): void {//设置全屏布局globalThis.windowClass.setWindowLayoutFullScreen(true)}onPageHide(): void {//取消全屏布局globalThis.windowClass.setWindowLayoutFullScreen(false)}build() {Column() {//页面区域Column() {Text('沉浸式状态栏').fontColor('#fff')}.height('100%').width('100%').border({width: 1,color: 'red'})}.height('100%').width('100%').backgroundImage(`https://img1.baidu.com/it/u=3138942692,3007703896&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500`).backgroundImageSize({ height: '100%', width: '100%' }).padding({ top: globalThis.statusHeight, bottom: globalThis.bottomAvoidAreaHeight })}
}

二、方法二

1、实现讲解

通过NavDestination作为页面根容器,并隐藏标题栏即可快速实现沉浸式状态,NavDestination从api 11开始默认支持安全区避让特性,所以关于页面重叠问题就不需要解决

2、代码实现

Index.ets(页面)


@Entry
@Component
struct Index{build() {NavDestination(){//页面区域Column(){Text('沉浸式状态栏').fontColor('#fff')}.width('100%').height('100%').border({width:1,color:'red'})}.hideTitleBar(true).backgroundImage(`https://img0.baidu.com/it/u=2299333132,3832906774&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500`).backgroundImageSize({height:'100%',width:'100%'})}
}

运行效果:

在这里插入图片描述


最后补充

如果想修改状态栏文字颜色可通过:setWindowSystemBarProperties实现

   window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {windowClass.setWindowSystemBarProperties({statusBarContentColor:"#ffffff"})}})

在这里插入图片描述

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

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

相关文章

Win11 删除文件时提示“找不到该项目,请重试”的解决办法

1、Win R 打开运行窗口,输入 notepad 并回车打开文本文档(记事本)软件,如下图: 2、在文本文档(记事本)软件中复制粘贴以下代码,如下图: del /f /a /q \\?\%1 rd /s /q \\?\%1或DEL /F /A /Q \\?\%1 RD /S /Q \\?…

红队内网攻防渗透:内网渗透之内网对抗:网络通讯篇防火墙组策略入站和出站规则单层双层C2正反向上线解决方案

红队内网攻防渗透 1. 内网网络通讯1.1 防火墙策略-入站规则&出站规则&自定义1.1.1 防火墙默认入站&出站策略1.1.2 防火墙自定义入站&出站策略1.1.3 内网域防火墙同步策略1.2 防火墙限制1.2.1 防火墙限制端口1.2.2 防火墙限制协议1.2.2.1 防火墙协议入站限制1.2…

html做一个分组散点图图的软件

在HTML中创建一个分组散点图,可以结合JavaScript库如D3.js或Plotly.js来实现。这些库提供了强大的数据可视化功能,易于集成和使用。下面是一个使用Plotly.js创建分组散点图的示例: 要添加文件上传功能,可以让用户上传包含数据的文…

昇思25天学习打卡营第4天|网络构建|函数式自动微分

学AI还能赢奖品?每天30分钟,25天打通AI任督二脉 (qq.com) 网络构建 神经网络模型是由神经网络层和Tensor操作构成的,mindspore.nn提供了常见神经网络层的实现,在MindSpore中,Cell类是构建所有网络的基类,也…

基于uni-app和图鸟UI的智慧农业综合管控平台小程序技术实践

摘要: 随着信息化技术的飞速发展,智慧农业已成为推动农业现代化、提升农业生产效率的重要手段。本文介绍了一款基于uni-app框架和图鸟UI设计的智慧农业综合管控平台小程序,该平台整合了传感器控制、农业数据监测、设施管控、农业新闻传播以及…

论文:R语言数据分析之机器学习论文

欢迎大家关注全网生信学习者系列: WX公zhong号:生信学习者Xiao hong书:生信学习者知hu:生信学习者CDSN:生信学习者2 一、研究背景 全球范围内,乳腺癌是导致癌症发病率和死亡率的主要疾病之一。根据2018年…

爬虫经典案例之爬取豆瓣电影Top250(方法二)

在上一篇文章的基础上,改进了代码质量,增加了多个正则表达式匹配,但同事也增加了程序执行的耗时。 from bs4 import BeautifulSoup import requests import time import re from random import randint import pandas as pdurl_list [https…

【MySQL 的三大日志的作用】

在管理MySQL数据库时,了解和区分数据库使用的三大日志类型至关重要。这些日志对于确保数据的完整性、提供恢复机制以及维持数据库的稳定性发挥着关键作用。最主要还是小豆前段时间去参加面试被问到了这些内容,下面将详细讨论Redo Log、Binlog和Undo Log的…

各种开发语言运行时占用内存情况比较

随着科技的发展,编程语言种类繁多,不同的编程语言在运行时的内存占用情况各不相同。了解这些差异对于开发者选择合适的编程语言尤为重要。本文将讨论几种主流编程语言在运行时的内存占用情况,包括C、C、Java、Python和Go等。 1. C语言 内存…

宏集物联网工控屏通过 S7 ETH 协议采集西门子 1200 PLC 数据

前言 为了实现和西门子PLC的数据交互,宏集物联网HMI集成了S7 PPI、S7 MPI、S7 Optimized、S7 ETH等多个驱动来适配西门子200、300、400、1200、1500、LOGO等系列PLC。 本文主要介绍宏集物联网HMI如何通过S7 ETH协议采集西门子1200 PLC的数据,文中详细介…

Element 进度条样式优化

在开发后台管理系统时,经常会用到进度条这样一个控件,Element UI中提供了progress这样一个组件,如下图所示: 该组件默认的颜色会比较单一,为此时常需要对该组件的样式进行一些优化,以满足实际项目的需求。 …

vue跳转页面 如果登录了直接跳转 没有登录登录完以后直接跳转,使用vuex管理登录状态

在Vue.js中,如果你需要在用户登录后重定向到他们原本想要访问的页面,你可以使用Vue Router的beforeEach守卫来实现这个功能。以下是实现这一需求的步骤: 存储目标路由:在用户被重定向到登录页面之前,存储他们想要访问的…

shinydashboard与shiny详细教程

以下是一个详细的教程,展示如何使用 shinydashboard 和 shiny 创建一个交互式的仪表板应用。我们将逐步讲解如何设置基本的仪表板结构、添加交互组件以及将数据集成到应用中。 安装必要的包 首先,确保你已经安装了 shiny 和 shinydashboard 包&#xf…

skywalking segment索引占用elasticsearch大量磁盘空间

现象: skywalking segment索引占用elasticsearch大量磁盘空间 原因 recordDataTTL 是SkyWalking的一个配置项,用于设置记录数据的存活时间(TTL, Time To Live)。SkyWalking是一个开源的应用性能监控系统,用于监控分…

精准测试与传统的手工测试

大部分测试从业人员都经历了手工测试到自动化测试递进,测试技术及思路都发生了日新月异的变化,有些中厂及大厂都有一套强大且复杂的自动化测试用例时刻保障产品的稳定性及正确性。 所谓精准测试,就是借助一定的技术手段、通过算法的辅助对传…

人工智能在气象预报领域的崛起:GraphCast引领新纪元

最近,谷歌推出的天气预测大模型GraphCast在全球范围内引起了广泛关注,其卓越的表现不仅刷新了人们对AI能力的认知,更预示着传统天气预报工作模式的深刻变革。 GraphCast是一款基于机器学习技术的天气预测工具,它通过深度学习和大数…

基于语音识别的智能电子病历(五)电子病历编辑器

前言 首先我们要明确一个概念:很多电子病历的编辑器,在输入文字的地方,有个麦克风按钮,点击一下,可以进行录音,然后识别的文字会自动输入到电子病历中,这种方式其实不能称为“基于语音识别的智…

自定义平台后台登录地址前缀的教程

修改平台后台地址默认的 admin 前缀 修改后端 config/admin.php 配置文件,为自定义的后缀修改 平台后台前端源码中 src/settings.js 文件,修改为和上面一样的配置修改后重新打包前端代码,并且覆盖到后端的 public 目录下重启 swoole 服务即可

教案:在 Spark 上使用 Horovod 进行分布式训练

教案:在 Spark 上使用 Horovod 进行分布式训练 课程目标 理解 Horovod 与 Spark 的集成及其优势。学习使用 Horovod 的 Estimator API 进行模型训练。掌握使用 Horovod 的 Run API 实现更细粒度的控制。掌握在 GPU 和 CPU 环境下配置 Spark 集群进行深度学习任务。…

从移动、桌面端到AR/VR:HOOPS Visualize如何实现卓越的3D模型可视化?

在当今迅速发展的技术环境中,高性能、跨平台的图形引擎是工程应用程序开发的核心需求。HOOPS Visualize作为一款领先的3D图形SDK,为桌面、移动和AR/VR应用程序提供了强大的2D和3D图形支持。其设计旨在实现工程应用程序中的高性能可视化,确保在…