HarmonyOS 鸿蒙Next 获取导航栏避让高度后,设置到页面底部的tab上,底部tab明显距离屏幕底部很大

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 获取导航栏避让高度后,设置到页面底部的tab上,底部tab明显距离屏幕底部很大

获取导航栏避让高度后,设置到页面底部的tab上,底部tab明显距离屏幕底部很大,不符合预期
 

2 回复
getWindowAvoidArea接口获取的值是px单位,需要转成vp单位,可以通过px2vp接口转换。

相关文档如下: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-uitest-V5#rect9

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-pixel-units-V13#%E5%83%8F%E7%B4%A0%E5%8D%95%E4%BD%8D%E8%BD%AC%E6%8D%A2

代码实现如下:     

      const winClass = await window.getLastWindow(getContext())

            winClass.setWindowLayoutFullScreen(true)

            const bottomType = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR

            const bottomArea = winClass.getWindowAvoidArea(bottomType)

            console.log(wsf: bottomArea ${<span class="hljs-built_in">JSON</span>.stringify(bottomArea)})

            console.log(wsf: ${px2vp(bottomArea.bottomRect.height)})

更多关于HarmonyOS 鸿蒙Next 获取导航栏避让高度后,设置到页面底部的tab上,底部tab明显距离屏幕底部很大的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中,获取导航栏避让高度并设置到页面底部的tab上,若底部tab明显距离屏幕底部很大,通常是因为在设置避让高度时未正确计算整体布局高度。

确保你的代码逻辑中正确处理了避让高度的应用。避让高度应仅作为底部tab上方的一个额外空间,而不是直接加到tab的底部边距上。正确的做法是在布局中,为底部tab设置一个相对父布局底部的位置,然后在此位置上再减去获取的导航栏避让高度。

例如,如果你的底部tab使用的是一个自定义组件或布局,你可以在该组件的布局参数中,通过编程方式动态设置其底部边距。这个边距应该是父布局高度减去tab本身高度,再减去避让高度。

示例代码(伪代码):

let navBarOffset = getNavBarOffset(); // 获取导航栏避让高度
let tabHeight = getTabHeight(); // 获取底部tab高度
let parentHeight = getParentHeight(); // 获取父布局高度
let bottomMargin = parentHeight - tabHeight - navBarOffset;
setTabBottomMargin(bottomMargin); // 设置底部tab的底部边距

确保所有高度值都是以相同的单位(如px、dp)计算。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部