【鸿蒙开发教程】HarmonyOS 开发中角落里的小知识 —— AvoidArea

最新推荐文章于 2024-09-29 19:49:24 发布

「已注销」

最新推荐文章于 2024-09-29 19:49:24 发布

阅读量955

点赞数 21

文章标签： harmonyos 华为鸿蒙鸿蒙系统

本文链接：https://blog.csdn.net/HarmonyOS_001/article/details/139746610

版权

一、前言

根据研究机构Counterpoint Research发布的最新数据，2024年第一季度，鸿蒙OS份额由去年一季度的8%上涨至17%，iOS份额则从20%下降至16%。

这意味着，华为鸿蒙OS在中国市场的份额超越苹果iOS，已成中国第二大操作系统

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

这篇文章主要是讲一讲鸿蒙开发的一个小知识AvoidArea

在探索 HarmonyOS 的过程中，我们发现了许多有趣且实用的功能和特性。有些总是在不经意间或者触类旁通的找到。其中，AvoidArea 是窗口内容需要规避区域，也是我们在处理沉浸式、全屏时遇到的。
该系列将着重分享、介绍HarmonyOS API11+的新版本特性或者奇奇怪怪的解决方案、BUG。（弃用API非必要不提及）

二、沉浸式

和窗口相关的API几乎都在@ohos.window模块下，直接使用window.setWindowLayoutFullScreen(true)即可获得一个沉浸式效果。此时布局不避让状态栏与导航栏，组件与其重叠。

一般而言你可以在任何地方使用await window.getLastWindow(getContext())来获得当前的window对象，subwindow不在此列。当然它也有对应的callback写法(但是，是await不好用吗？)

 import { BusinessError } from '@ohos.base';
 
 let isLayoutFullScreen = true;
 try {
   let promise = windowClass.setWindowLayoutFullScreen(isLayoutFullScreen);
   promise.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));
   });
 } catch (exception) {
   console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(exception));
 }

三、全屏

全屏一般是指隐藏NavigationBar和StatusBar，使用setWindowSystemBarEnable，传入一个空的数组。就可以获得一个光溜溜的界面了。（此时自带沉浸式，毕竟沉浸的地方都没了）

 let win = await window.getLastWindow(getContext())
 win.setWindowSystemBarEnable([])

目前该方法接收一个数组对象，setWindowSystemBarEnable(names: Array<‘status’ | ‘navigation’>)，不显示哪个，就不传入哪个便好。
还有一个API，用于单独控制，而且多了一个导航条的控制，但是其表现在API12上，完全不符合预期。所以不做赘述

 win.setSpecificSystemBarEnabled("status",false)
 win.setSpecificSystemBarEnabled("navigation",false)
 win.setSpecificSystemBarEnabled("navigationIndicator",true)

四、AvoidArea

这是正主了，往往沉浸式的时候，需要去处理组件被系统栏盖住的情况。此时你可以使用getWindowAvoidArea(type: AvoidAreaType): AvoidArea

 let type = window.AvoidAreaType.TYPE_SYSTEM;
 try {
   let avoidArea = windowClass.getWindowAvoidArea(type);
 } catch (exception) {
   console.error('Failed to obtain the area. Cause:' + JSON.stringify(exception));
 }

在这里插入图片描述

可以看到，接收5种类型。其中TYPE_NAVIGATION_INDICATOR是为了解决，沉浸式的时候，获取TYPE_SYSTEM底部规避区域高度为0的BUG，而诞生的新Type。

AvoidArea是一个拥有4个Rect的容器。
在这里插入图片描述

值得注意的是：

●底部手势区域中非导航条区域支持点击、长按事件透传，不支持拖入。
●左右侧边手势区域支持点击、长按以及上下滑动事件透传，不支持拖入。
●导航条区域支持长按、点击、拖入事件响应，不支持事件向下透传。

有时候，规避区域是会变化的，监听一下就好了。反过来off解除。

 try {
   windowClass.on('avoidAreaChange', (data) => {
     console.info('Succeeded in enabling the listener for system avoid area changes. type:' +
     JSON.stringify(data.type) + ', area: ' + JSON.stringify(data.area));
   });
 } catch (exception) {
   console.error('Failed to enable the listener for system avoid area changes. Cause: ' + JSON.stringify(exception));
 }

五、expandSafeArea

这个API是在做自定义键盘面板的时候发现的。实际上它完全可以用来做沉浸式，而且更加的方便，只在加了的地方生效，而不像window直接生效在整个页面。

使用起来也很简单，直接在根组件（任意组件都行）

 build() {
     Column() {
         Column() {
            
         }
         .width('100%')
         .height('100%')
     }
     .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM,SafeAreaEdge.TOP])
     .backgroundColor(Color.Orange)
     .size({ width: '100%', height: '100%' })
 }

此时，和window.setWindowLayoutFullScreen(true)的效果是一模一样的。
哦，这个要API 11。