​問題背景：

快應用頁面右上角的選單欄在一般情形下，是不讓去除的，這就導致在進行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