【HarmonyOS NEXT】如何获取底部手势指示条高度

【关键字】

窗口全屏布局 / 组件安全区 / 手机底部手势

【问题描述】

需要实现APP首页Tab栏被指示条挡住，需要通过计算将Tab栏上移。手机底部手势指示条高度获取方式是怎样的。

尝试如下代码，返回值均为0：

window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).bottomRect.height

window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM_GESTURE).topRect.height

window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM_GESTURE).bottomRect.height

【解决方案】

可参考开发应用沉浸式效果的。

官方指导：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-develop-apply-immersive-effects-0000001820435461#section202081847174413

分为两种实现方案：

1、窗口全屏布局方案

2、组件安全区方案

1、采用窗口全屏布局方案时，参考代码如下：

// entryAbiltity.ets
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 type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
let avoidArea = windowClass.getWindowAvoidArea(type);
// 此处获取的单位为px，需转为vp
let bottomRectHeight = px2vp(avoidArea.bottomRect.height); // 获取到导航条区域的高度
console.log("bottomRectHeight is " + bottomRectHeight);AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);

在tab页中将整体页面设置margin({bottom: bottomRectHeight})即可。

2、采用组件安全区方案，不设置窗口全屏，这种场景下，针对底部的页签部分Navigation组件和Tabs组件默认实现了页签的延伸处理，开发者只需要保证Navigation和Tabs组件的底部边界和底部导航条重合即可。