HarmonyOS鸿蒙Next设备底部导航条遮挡应用界面

HarmonyOS鸿蒙Next设备底部导航条遮挡应用界面

  • 问题：HarmonyOS NEXT Developer Beta 版本中，应用未完成相关适配时，设备底部导航条会遮挡应用界面，影响 UX 显示效果。

  • 背景：随着 HarmonyOS NEXT 的发展，新功能不断增加，导航条等系统组件的变化可能导致与应用界面的适配问题，影响用户体验，因此开发者需要关注并解决此类问题，以确保应用在新系统上的正常显示。

4 回复

您的问题有两种方案：

1、获取布局避让遮挡的区域

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);

参考文档：https://developer.huawei.com/consumer/cn/doc/atomic-references/js-apis-window-0000001824697921

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

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-universal-attributes-expand-safe-area-V13# 示例1实现沉浸式效果

更多关于HarmonyOS鸿蒙Next设备底部导航条遮挡应用界面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个有相应的截图吗？看下是哪种遮挡。

不会是这个问题吧？跳转到子页面，tabbar无法隐藏的问题？如果是这个问题，属于用法问题，有解决办法。参见这篇文章：

HarmonyOS NEXT的Navigation，跳转子页面后底部Tab不隐藏问题解决

在HarmonyOS鸿蒙Next设备中，底部导航条遮挡应用界面的问题通常与应用的布局适配有关。鸿蒙系统提供了多种方式来管理应用界面与系统UI元素的交互，包括底部导航条。开发者可以通过使用ohos.window模块中的Window类来获取窗口的显示区域信息，并根据系统提供的安全区域（Safe Area）来调整应用布局，以避免内容被底部导航条遮挡。

具体来说，可以使用Window类的getWindowAvoidArea方法来获取系统UI元素（如导航条）的避让区域，然后在布局时根据这些信息进行相应调整。此外，鸿蒙系统还提供了ohos.agp.components.ComponentContainer类中的setWindowInsetsListener方法，允许开发者监听窗口的插入区域变化，并动态调整布局。

如果应用采用了鸿蒙的AdaptiveBox或FlexLayout等布局组件，系统会自动处理部分适配问题，但仍需开发者根据具体场景进行微调。确保应用界面与系统UI元素的和谐共存是提升用户体验的重要一环。

在HarmonyOS鸿蒙Next设备上，底部导航条遮挡应用界面的问题通常是由于应用未适配全面屏或系统导航栏导致的。解决方法如下：

  1. 应用适配：开发者应使用fitSystemWindows属性或WindowInsets API来调整布局，确保内容不被导航条遮挡。

  2. 系统设置：用户可在系统设置中调整导航栏样式，如开启“手势导航”或隐藏导航条，减少遮挡。

  3. 全屏模式：应用可调用setSystemUiVisibility方法进入全屏模式，临时隐藏导航条。

通过这些方法，可以有效解决底部导航条遮挡应用界面的问题。

回到顶部