鸿蒙NEXT版实战开发：网页中安全地区计算和避让适配
往期鸿蒙全套实战精彩文章必看内容：[*] 鸿蒙开发核心知识点，看这篇文章就够了
[*] 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
[*] 鸿蒙HarmonyOS NEXT开发技术最全学习门路指南
[*] 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
网页中安全地区计算和避让适配
Web组件提供了利用W3C CSS举行安全地区计算并避让适配的本领，用来支持异形屏幕装备在沉浸式效果下页面的正常表现。
实现原理
ArkWeb内核会监听Web组件及体系安全地区的位置和尺寸，根据两者的重叠地区计算当前Web组件的安全地区以及各个方向上必要避让的间隔。
使用场景
安全地区是指页面的表现地区，默认不与体系设置的非安全地区比如状态栏、导航栏地区重叠，开发者开发的界面都被布局在安全地区内。当Web组件应用了沉浸式效果时，网页内元素就可能会出现与状态栏或导航栏地区重叠的体验问题。
此时，网页开发者想对重叠元素举行避让，就可以使用该功能。
Web组件开启沉浸式效果
开发者可以通过expandSafeArea来开启沉浸式效果。
// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.width('100%').height('100%')
.expandSafeArea(, )
}
}
} 设置网页在可视窗口中的布局方式
viewport-fit用于限定网页在安全地区内的展示形态。默以为auto，与contain体现同等，表示可视窗口完全包含网页内容，即网页全部内容展示于安全地区内。而cover则表示网页内容完全覆盖可视窗口，即网页内容不仅展示于安全地区，还包含非安全地区，即可能与状态栏和导航栏发生重叠，只有这种场景下网页必要举行避让适配，设置方式如下：
<meta name='viewport' content='viewport-fit=cover'> 网页元素举行避让适配
网页元素举行避让适配，主要利用env() CSS函数，用于向CSS插入用户代码界说的变量，允许开发人员将其内容放置在视口的安全地区中，该规范中界说的safe-area-inset-*值可用于确保内容即使在非矩形的视区中也可以完全表现，语法如下：
/* 直接使用四个safe-area-inset-*环境变量值 */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
/* 基于fallback使用四个safe-area-inset-*环境变量值 */
/* 下述长度单位参见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/length */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem); safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
safe-area-inset-*由四个界说了视口边沿内矩形的 top, right, bottom 和 left 的情况变量构成，如许可以安全地放入内容，而不会有被非矩形的表现切断的风险。对于矩形视口，例如普通的2in1装备表现器，其值即是零。对于非矩形表现器（如圆形表盘，移动装备屏幕等），在用户署理设置的四个值形成的矩形内，所有内容均可见。
差别于其他的 CSS 属性，用户署理界说的属性名字对大小写敏感。同时，必要留意env()必须配合viewport-fit=cover使用。
对于一些购物网站，首页网页底部为tab情势的fix元素，在沉浸式状态下这些fix元素就必要举行底部避让，以防止fix元素与体系导航条发生重叠遮挡，举例如下：
.tab-bottom {
padding-bottom: env(safe-area-inset-bottom);
} 同时，上述env()使用还能基于部分数学计算函数calc(),min(),max()组合计算，如：
.tab-bottom {
padding-bottom: max(env(safe-area-inset-bottom), 30px);
} https://i-blog.csdnimg.cn/direct/5be73c96555f4ad39cb84daabe28288e.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]