【快应用】如何获取标题栏高度

​问题背景：

快应用页面右上角的菜单栏在一般情形下，是不让去除的，这就导致在进行ui布局时，要留出一个的高度来适配，此时就需要获取菜单栏的高度，而菜单栏的高度是和标题栏一致的，因此获取到标题栏高度即可得到菜单栏的高度，本文就详细介绍了如何获取。

 

解决方案：

可以通过device.getInfo接口获取设备信息，然后根据公式计算：标题栏高度=屏幕的高度-可使用窗口高度-状态栏高度，即titleBarHeight= screenHeight-windowHeight-statusBarHeight。但是使用上述公式计算时，不能开启沉浸式状态栏，否则计算数据有误。即statusBarImmersive字段不能设置为true。

示例代码：

<template>

<div class="container">

<text>标题栏高度：</text>

<text style="background-color: #7cfc00;">{{ this.titieBarHeight }}</text>

</div>

</template>

<style>

.container {

width: 350px;

height: 250px;

}

</style>

<script>

import device from "@system.device";

export default {

data: {

titieBarHeight: ""

},

onInit() {

this.$page.setTitleBar({ text: "获取标题栏高度", backgroundColor: "#7cfc00" });

this.$page.setStatusBar({ backgroundColor: "#8b0000" });

},

onShow: function () {

var that = this;

device.getInfo({

success: function (ret) {

console.log("屏幕的高度=" + ret.screenHeight);

console.log("状态栏高度=" + ret.statusBarHeight);

console.log("可使用窗口高度=" + ret.windowHeight);

console.log("屏幕密度=" + ret.screenDensity);

console.log("标题栏高度=" + (ret.screenHeight - ret.statusBarHeight - ret.windowHeight));

that.titieBarHeight = ret.screenHeight - ret.statusBarHeight - ret.windowHeight;

}

});

}

};

</script>

​欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh