HarmonyOS 鸿蒙Next中【快应用】如何获取标题栏高度

HarmonyOS 鸿蒙Next中【快应用】如何获取标题栏高度 问题背景：

快应用页面右上角的菜单栏在一般情形下，是不让去除的，这就导致在进行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>

更多关于HarmonyOS 鸿蒙Next中【快应用】如何获取标题栏高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next中【快应用】如何获取标题栏高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，获取快应用的标题栏高度可以通过getSystemInfo API实现。具体步骤如下：

  1. 使用getSystemInfo获取系统信息。
  2. 从返回的信息中提取statusBarHeight和titleBarHeight。
  3. 标题栏高度通常为titleBarHeight，但需注意不同设备可能有所差异。

示例代码：

const systemInfo = getSystemInfo();
const titleBarHeight = systemInfo.titleBarHeight;
console.log('标题栏高度:', titleBarHeight);

确保在快应用的manifest.json中声明必要的权限。

回到顶部