当前位置: 首页 > news >正文

【HarmonyOS Next】原生沉浸式界面

背景

在实际项目中,为了软件使用整体色调看起来统一,一般顶部和底部的颜色需要铺满整个手机屏幕。因此,这篇帖子是介绍设置的方法,也是应用沉浸式效果。如下图:底部的绿色延伸到上面的状态栏和下面的导航栏

UI

在鸿蒙应用中,全屏UI元素分为状态栏、应用界面和导航栏。

一般实现应用沉浸式效果由两种方式:

  • 窗口全屏布局方案:调整布局系统为全屏布局,界面元素延伸到状态栏和导航条区域实现沉浸式效果。
  • 组件延伸方案:组件布局在应用界面区域,通过接口方法延伸到状态栏和导航栏。

窗口全屏布局方案

  1. 新建展示页面,并使用@StorageProp定义页面内容的顶部偏移和底部偏移属性
@Entry
@Component
struct Index {@StorageProp('bottomRectHeight')bottomRectHeight: number = 0;@StorageProp('topRectHeight')topRectHeight: number = 0;build() {Row() {Column() {Row() {Text('DEMO-ROW1').fontSize(40)}.backgroundColor(Color.Orange).padding(20)Row() {Text('DEMO-ROW2').fontSize(40)}.backgroundColor(Color.Orange).padding(20)Row() {Text('DEMO-ROW3').fontSize(40)}.backgroundColor(Color.Orange).padding(20)Row() {Text('DEMO-ROW4').fontSize(40)}.backgroundColor(Color.Orange).padding(20)Row() {Text('DEMO-ROW5').fontSize(40)}.backgroundColor(Color.Orange).padding(20)Row() {Text('DEMO-ROW6').fontSize(40)}.backgroundColor(Color.Orange).padding(20)}.width('100%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.SpaceBetween).backgroundColor('#008000')// top数值与状态栏区域高度保持一致;bottom数值与导航条区域高度保持一致.padding({ top: px2vp(this.topRectHeight), bottom: px2vp(this.bottomRectHeight) })}}
}
  1. 在EntryAbility的onWindowStageCreate方法中,调用window.Window.setWindowLayoutFullScreen方法设置窗口全屏。
let windowClass: window.Window = windowStage.getMainWindowSync();
let isLayoutFullScreen = true;windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {console.info('Succeeded in setting the window layout to full-screen mode.');}).catch((err: BusinessError) => {console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));});
  1. 为了避免构件被挡住,根据导航条和状态栏的高度,修改bottomRectHeight和topRectHeight的数值。
    //获取导航栏高度let bottomRectHeight = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height;AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);// 获取状态栏区域高度let topRectHeight = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height;AppStorage.setOrCreate('topRectHeight', topRectHeight);
  1. 再设置页面监听,动态修改bottomRectHeight和topRectHeight的数值。
windowClass.on('avoidAreaChange', (data) => {if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {let topRectHeight = data.area.topRect.height;AppStorage.setOrCreate('topRectHeight', topRectHeight);} else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {let bottomRectHeight = data.area.bottomRect.height;AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);}});

EntryAbility完整代码

仅需要修改onWindowStageCreate方法

onWindowStageCreate(windowStage: window.WindowStage): void {// Main window is created, set main page for this abilityhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');windowStage.loadContent('pages/Index', (err) => {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.');});// 获取应用主窗口let windowClass: window.Window = windowStage.getMainWindowSync();// 设置窗口全屏let isLayoutFullScreen = true;windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {console.info('Succeeded in setting the window layout to full-screen mode.');}).catch((err: BusinessError) => {console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));});//获取导航栏高度let bottomRectHeight = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height;AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);// 获取状态栏区域高度let topRectHeight = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height;AppStorage.setOrCreate('topRectHeight', topRectHeight);// 注册监听函数,动态获取避让区域数据windowClass.on('avoidAreaChange', (data) => {if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {let topRectHeight = data.area.topRect.height;AppStorage.setOrCreate('topRectHeight', topRectHeight);} else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {let bottomRectHeight = data.area.bottomRect.height;AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);}});}

组件延伸方案

使用expandSafeArea方法来实现。

expandSafeArea(types?: Array<SafeAreaType>, edges?: Array<SafeAreaEdge>): T;
  • types:配置扩展安全区域的类型。SafeAreaType枚举类型,SYSTEM是系统默认非安全区域,包括状态栏、导航栏;CUTOUT是设备的非安全区域,例如刘海屏或挖孔屏区域;KEYBOARD是软键盘区域,组件不避让键盘。
  • edges:扩展安全区域的方向。

代码

通过颜色对比,可以看出组件延伸效果。

  • column:背景颜色设置为橘色,从图片可以看出只能在安全区域内显示。
  • list:背景颜色设置为黄色,从图片可以看出已经延伸至导航条和状态栏了。
  • Text:背景颜色设置成红色,就可以看到整个组件的滑动过程.

@Entry
@Component
struct ExamplePage {private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]build() {Column() {List({ space: 20, initialIndex: 0 }) {ForEach(this.arr, (item: number) => {ListItem() {Text('' + item).width('100%').height(100).fontSize(16).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(Color.Red)}}, (item: number) => item.toString())}.listDirection(Axis.Vertical) // 排列方向.scrollBar(BarState.Off).friction(0.6).divider({strokeWidth: 2,color: 0xFFFFFF,startMargin: 20,endMargin: 20}) // 每行之间的分界线.edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring.width('90%').backgroundColor(Color.Yellow)// List组件的视窗范围扩展至导航条。.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])}.width('100%').height('100%').backgroundColor(Color.Orange)}
}

总结

如果不是全部界面都需要实现沉浸式布局时,可以通过组件延伸方案去实现部分组件的沉浸式布局。

相关文章:

【HarmonyOS Next】原生沉浸式界面

背景 在实际项目中&#xff0c;为了软件使用整体色调看起来统一&#xff0c;一般顶部和底部的颜色需要铺满整个手机屏幕。因此&#xff0c;这篇帖子是介绍设置的方法&#xff0c;也是应用沉浸式效果。如下图&#xff1a;底部的绿色延伸到上面的状态栏和下面的导航栏 UI 在鸿蒙…...

数据结构 ——— 树的概念及结构

目录 树的结构以及示意图 树的概念​编辑 树的结构与递归的关系​编辑 树的结构以及示意图 树是一种非线性的数据结构&#xff0c;它是由 n(n>0) 个有限节点组成一个具有层次关系的集合 把这种结构叫做树是因为它看起来像一棵倒挂的树 特点&#xff1a; 有一个特殊的…...

初探Vue前端框架

文章目录 简介什么是Vue概述优势MVVM框架 Vue的特性数据驱动视图双向数据绑定指令插件 Vue的版本版本概述新版本Vue 3Vue 3新特性UI组件库UI组件库概述常用UI组件库 安装Vue安装Vue查看Vue版本 实例利用Vue命令创建Vue项目切换工作目录安装vue-cli脚手架创建Vue项目启动Vue项目…...

Lucas带你手撕机器学习——岭回归

岭回归&#xff08;Ridge Regression&#xff09; 一、背景与引入 在进行线性回归分析时&#xff0c;我们常常面临多重共线性的问题。多重共线性指的是自变量之间高度相关&#xff0c;这会导致回归系数的不稳定性&#xff0c;使得模型的预测能力降低。传统的线性回归通过最小…...

C2W4.LAB.Word_Embedding.Part1

理论课&#xff1a;C2W4.Word Embeddings with Neural Networks 文章目录 Word Embeddings First Steps: Data PreparationCleaning and tokenizationSliding window of wordsTransforming words into vectors for the training setMapping words to indices and indices to w…...

hive初体验

1.首先&#xff0c;确保启动了Metastore服务。 runjar就是metastore进程 2.进入hive客户端: 命令:hive 3.操作:没有指定数据库时默认在default 一:创建表:CREATE TABLE test(id INT, name STRING, gender STRING); 完成,show tables看一下 也可以通过hdfs文件系统查看,默认路径…...

云渲染主要是分布式(分机)渲染,如何使用blender云渲染呢?

云渲染主要是分布式&#xff08;分机&#xff09;渲染&#xff0c;比如一个镜头同时开20-100张3090显卡的机器渲染&#xff0c;就能同时渲染20-100帧&#xff0c;渲染不仅不占用自己电脑&#xff0c;效率也将增加几十上百倍&#xff01; blender使用教程如下&#xff1a; 第一…...

WordPress与WP Engine:关键事件时间线

WordPress与WP Engine&#xff1a;关键事件时间线 以下时间线突出了9月和10月之间这场不断升级的WordPress与WP Engine冲突中的关键事件&#xff1a; 9月21日&#xff1a;Matt Mullenweg发布了一篇名为“WP Engine不是WordPress”的博客。 9月22日&#xff1a;Mullenweg批评…...

大数据治理平台建设规划方案(71页WORD)

随着信息化时代的到来&#xff0c;大数据已成为企业管理和决策的重要基础。然而&#xff0c;大数据的快速增长和复杂性给数据的管理和治理带来了巨大挑战。为了有效应对这些挑战&#xff0c;构建一个高效、稳定的大数据治理平台显得尤为重要。 文档介绍&#xff1a; 该平台旨在…...

Maven 项目管理工具

目录 Maven简介 Maven快速上手 Maven详细介绍 Maven工作机制 Maven安装及配置 使用IDEA创建Maven Web工程 Maven简介 Maven是 Apache 开源组织奉献的一个开源项目&#xff0c;可以翻译为“专家”或“内行”。 Maven 的本质是一个项目管理工具&#xff0c;将项目开发和管…...

ubuntu开机启动jar

要在Ubuntu系统上开机启动一个jar文件&#xff0c;你可以创建一个systemd服务单元。以下是创建服务并设置开机启动的步骤&#xff1a; 创建一个新的systemd服务文件。 打开一个新的服务文件&#xff0c;例如/etc/systemd/system/your-service.service&#xff0c;使用你喜欢的…...

【目标检测02】非极大值抑制 NMS

文章目录 1. 前言2. 原理3. 代码实现 1. 前言 在检测图像中的目标时&#xff0c;一个目标可能会被预测出多个矩形框&#xff0c;而实际上我们只需要一个&#xff0c;如何消除冗余的边界框呢&#xff1f;一种方简单的方案是提升置信度的阈值&#xff0c;过滤掉低置信度的边界框…...

104协议调试工具

在学习104协议过程中&#xff0c;通过直接阅读协议的学习方式会略有枯燥&#xff0c;这里把常用的104调试、测试工具介绍给大家&#xff0c;以便快速的进行模拟通信来更好的了解、学习104协议。 通信协议分析及仿真软件是非常重要的测试工具&#xff0c;该软件支持 101,104,mo…...

日常记录:es TransportClient添加证书处理

背景 最近在搞es登录&#xff0c;不知道是不是低版本问题&#xff08;6.8.12&#xff09;&#xff0c;开启登录之后springboot连接es&#xff0c;es一直报Caused by: io.netty.handler.ssl.NotSslRecordException: not an SSL/TLS record: 45530000002c000000000000009108004d3…...

apply call bind 简介

Function.prototype.call(thisArg [, arg1, arg2, …]) call() 简述 call() 方法 调用一个函数, 其具有一个指定的 this 值和分别地提供的参数(参数的列表)。当第一个参数为 null、undefined 的时候&#xff0c; 默认 this 上下文指向window。 call() 简单实例 const name …...

数据结构 单调栈

应用情景 求当前元素 前面/后面&#xff0c;第一个比它 小/大 的元素的 值/下标/下标距离 优点 剔除重复寻路操作&#xff0c;将暴力 O(n^2) 优化到 O(n) 性质 从栈底开始&#xff0c;元素 单调递增/单调递减 单调性视具体情景而定 (找较大值还是较小值、找的方向) 思路…...

【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (七):MongoDB的设置

本项目旨在学习如何快速使用 nodejs 开发后端api&#xff0c;并为以后开展其他项目的开启提供简易的后端模版。&#xff08;非后端工程师&#xff09; 由于文档是代码写完之后&#xff0c;为了记录项目中需要注意的技术点&#xff0c;因此文档的叙述方式并非开发顺序&#xff0…...

基于flask和neo4j的医疗知识图谱展示问答系统

如果你仍在为毕业设计的选题发愁&#xff0c;或者想通过技术项目提升专业实力&#xff0c;这个基于Flask和Neo4j的医疗知识图谱展示与问答系统&#xff0c;绝对是个不错的选择&#xff01; 项目亮点大揭秘&#xff1a; 知识图谱与问答结合&#xff1a;我们采用了医疗场景下的知…...

Python——脚本实现datax全量同步mysql到hive

文章目录 前言一、展示脚本二、使用准备1、安装python环境2、安装EPEL3、安装脚本执行需要的第三方模块 三、脚本使用方法1、配置脚本2、创建.py文件3、执行脚本4、测试生成json文件是否可用 前言 在我们构建离线数仓时或者迁移数据时&#xff0c;通常选用sqoop和datax等工具进…...

Python爬虫教程:从入门到精通

Python爬虫教程&#xff1a;从入门到精通 前言 在信息爆炸的时代&#xff0c;数据是最宝贵的资源之一。Python作为一种简洁而强大的编程语言&#xff0c;因其丰富的库和框架&#xff0c;成为了数据爬取的首选工具。本文将带您深入了解Python爬虫的基本概念、实用技巧以及应用…...

pytorh学习笔记——cifar10(四)用VGG训练

1、新建train.py&#xff0c;执行脚本训练模型&#xff1a; import os import timeimport torch import torch.nn as nn import torchvisionfrom vggNet import VGGbase, VGGNet from load_cifar import train_loader, test_loader import warnings import tensorboardX# 忽略…...

CRLF、UTF-8这些编辑器右下角的选项的意思

经常使用编辑器的小伙伴应该经常能看到右下角会有这么两个选项&#xff0c;下图是VScode中的示例&#xff0c;那么这两个到底是啥作用呢&#xff1f; 目录 字符编码ASCII 字符集GBK 字符集Unicode 字符集UTF-8 编码 换行 字符编码 此部分参考博文 在计算机中&#xff0c;所有…...

【C++干货篇】——类和对象的魅力(四)

【C干货篇】——类和对象的魅力&#xff08;四&#xff09; 1.取地址运算符的重载 1.1const 成员函数 将const修饰的成员函数称之为const成员函数&#xff0c;const修饰成员函数放到成员函数参数列表的后面。const实际修饰该成员函数隐含的this指针&#xff08;this指向的对…...

基于java的诊所管理系统源码,SaaS门诊信息系统,二次开发的不二选择

门诊管理系统源码&#xff0c;诊所系统源码&#xff0c;saas服务模式 医疗信息化的新时代已经到来&#xff0c;诊所管理系统作为诊所管理和运营的核心工具&#xff0c;不仅提升了医疗服务的质量和效率&#xff0c;也为患者提供了更加便捷和舒适的就医体验&#xff0c;同时还推动…...

O2OA如何实现文件跨服务器的备份

O2OA可以外接存储服务器&#xff0c;但是一个存储服务器上怕磁盘损坏等问题导致文件丢失&#xff0c;所以需要实现文件跨服务器备份。 整体过程&#xff1a; 1、SSH免密登录配置 2、增加一个同步推送文件的.sh文件 3、编辑crontab 增加定时任务执行上一步的.sh文件 一、配…...

语音提示器-WT3000A离在线TTS方案-打破语种限制/AI对话多功能支持

前言&#xff1a; TTS&#xff08;Text To Speech &#xff09;技术作为智能语音领域的重要组成部分&#xff0c;能够将文本信息转化为逼真的语音输出&#xff0c;为各类硬件设备提供便捷的语音提示服务。本方案正是基于唯创知音的离在线TTS&#xff08;离线本地音乐播放与在线…...

使用HAL库的STM32工程,实现DMA传输USART发送接收数据

以串口3为例&#xff0c;初始化部分为STM32CubeMX生成代码 串口初始化 UART_HandleTypeDef huart3; DMA_HandleTypeDef hdma_usart3_rx; DMA_HandleTypeDef hdma_usart3_tx;/* USART3 init function */ void MX_USART3_UART_Init(void) {/* USER CODE BEGIN USART3_Init 0 */…...

常用排序算法总结

内容目录 1. 选择类排序 1.1 直接选择排序1.2 堆排序 2. 交换类排序 2.1 冒泡排序2.2 快速排序 3. 插入类排序 3.1 直接插入排序3.2 希尔排序 4. 其它排序 4.1 归并排序4.2 基数排序/桶排序 排序 1. 选择类排序 选择类排序的特征是每次从待排序集合中选择出一个最大值或者最…...

[项目详解][boost搜索引擎#2] 建立index | 安装分词工具cppjieba | 实现倒排索引

目录 编写建立索引的模块 Index 1. 设计节点 2.基本结构 3.(难点) 构建索引 1. 构建正排索引&#xff08;BuildForwardIndex&#xff09; 2.❗构建倒排索引 3.1 cppjieba分词工具的安装和使用 3.2 引入cppjieba到项目中 倒排索引代码 本篇文章&#xff0c;我们将继续项…...

R语言编程

一、R语言在机器学习中的优势 R语言是一种广泛用于统计分析和数据可视化的编程语言,在机器学习领域也有诸多优势。 丰富的包:R拥有大量专门用于机器学习的包。例如,caret包是一个功能强大的机器学习工具包,它提供了统一的接口来训练和评估多种机器学习模型,如线性回归、决…...

受欢迎的广州做网站/成免费的crm

Educational Codeforces Round 116&#xff08;Rated for Div.2&#xff09;简训导语涉及的知识点题目A AB BalanceB Update FilesC Banknotes参考文献导语 涉及的知识点 数学&#xff0c;思维 链接&#xff1a;Educational Codeforces Round 116&#xff08;Rated for Div.2…...

网站倒计时怎么做/项目推广渠道有哪些

Numpy包含大量的数学函数&#xff0c;如三角函数、算术函数和处理复数的函数等等&#xff0c;这些函数可以用来执行各种数学操作。三角函数Numpy中包含三角函数&#xff0c;用于不同角度的正弦、余弦和正切等就散。示例importnumpy as nparr np.array([0, 30, 60, 90, 120, 150…...

网站建设链接演示/东莞搜索优化

ssh -p2016 apache10.10.18.130 /bin/sh /data/www/vhosts/WOStest3_ENV/update_env.sh 需要设置shell远程免密码登录 转载于:https://www.cnblogs.com/ai594ai/p/7306402.html...

兰州网站seo收费/b站视频推广

POJ2689 Prime Distance题解题目题目描述英文题目中文题意输入输出格式输入格式输出格式输入输出样例输入样例输出样例题解题目 题目描述 原题 英文题目 The branch of mathematics called number theory is about properties of numbers. One of the areas that has captu…...

天津建站管理系统价格/第三方网络营销平台有哪些

delete 操作符是从某个对象上移除指定属性&#xff0c;成功删除的时候返回 true &#xff0c;否则返回 false。 如果删除的属性在对象上不存在&#xff0c;那么 delete 将不起作用&#xff0c;但仍会返回 true。 var person {age:100,name:"yangguo",}console.log(p…...

做网站做app什么专业/google推广公司哪家好

前言 找工作还是需要大家不要紧张&#xff0c;有我们干这一行的接触人本来就不多 难免看到面试官会紧张&#xff0c;主要是因为怕面试官问的问题到不上来&#xff0c;那时候不要着急 &#xff0c;答不上了的千万不然胡扯一些&#xff0c;直接就给面试官说这块我还没接触到&…...